<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.66">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <link rel="icon" href="https://cdn.pixabay.com/animation/2022/08/05/07/12/07-12-14-597_512.gif"><title>JavaScript | PERSIST</title><meta name="description" content="三剑客、Vue、React、...">
    <link rel="preload" href="/blogs/assets/style-3126903c.css" as="style"><link rel="stylesheet" href="/blogs/assets/style-3126903c.css">
    <link rel="modulepreload" href="/blogs/assets/app-5598dde8.js"><link rel="modulepreload" href="/blogs/assets/JavaScript.html-ea762ff0.js"><link rel="modulepreload" href="/blogs/assets/JavaScript.html-099c0d25.js"><link rel="prefetch" href="/blogs/assets/index.html-d9b814f4.js" as="script"><link rel="prefetch" href="/blogs/assets/css.html-38c59cab.js" as="script"><link rel="prefetch" href="/blogs/assets/css3.html-28b2b602.js" as="script"><link rel="prefetch" href="/blogs/assets/html.html-fda41b1c.js" as="script"><link rel="prefetch" href="/blogs/assets/html5.html-b423fb46.js" as="script"><link rel="prefetch" href="/blogs/assets/TypeScript.html-8e165f09.js" as="script"><link rel="prefetch" href="/blogs/assets/base.html-84d926c4.js" as="script"><link rel="prefetch" href="/blogs/assets/bigscreen.html-5524caa6.js" as="script"><link rel="prefetch" href="/blogs/assets/react.html-8bfc6f05.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-02246930.js" as="script"><link rel="prefetch" href="/blogs/assets/vue.html-241f215e.js" as="script"><link rel="prefetch" href="/blogs/assets/handbook.html-6cbaa868.js" as="script"><link rel="prefetch" href="/blogs/assets/React.html-418e631e.js" as="script"><link rel="prefetch" href="/blogs/assets/ReactRouter.html-7e5f06ff.js" as="script"><link rel="prefetch" href="/blogs/assets/Redux.html-5560e17c.js" as="script"><link rel="prefetch" href="/blogs/assets/StudyTutorial.html-b823f3d9.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-f94e0631.js" as="script"><link rel="prefetch" href="/blogs/assets/Pinia.html-387c093b.js" as="script"><link rel="prefetch" href="/blogs/assets/Vue3.html-16d06532.js" as="script"><link rel="prefetch" href="/blogs/assets/VueApi.html-bb8b9635.js" as="script"><link rel="prefetch" href="/blogs/assets/VueRouter.html-ae38cb38.js" as="script"><link rel="prefetch" href="/blogs/assets/Vuex4.html-7a289a91.js" as="script"><link rel="prefetch" href="/blogs/assets/vue_notes.html-cbe8ffc8.js" as="script"><link rel="prefetch" href="/blogs/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/blogs/assets/index.html-443e75e2.js" as="script"><link rel="prefetch" href="/blogs/assets/css.html-ab74bca3.js" as="script"><link rel="prefetch" href="/blogs/assets/css3.html-77914954.js" as="script"><link rel="prefetch" href="/blogs/assets/html.html-841090be.js" as="script"><link rel="prefetch" href="/blogs/assets/html5.html-4d4eaa91.js" as="script"><link rel="prefetch" href="/blogs/assets/TypeScript.html-f51a5af3.js" as="script"><link rel="prefetch" href="/blogs/assets/base.html-15ef8c21.js" as="script"><link rel="prefetch" href="/blogs/assets/bigscreen.html-0d51dc7f.js" as="script"><link rel="prefetch" href="/blogs/assets/react.html-eb1112c8.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-3457663e.js" as="script"><link rel="prefetch" href="/blogs/assets/vue.html-3059cfc3.js" as="script"><link rel="prefetch" href="/blogs/assets/handbook.html-cd96bfb6.js" as="script"><link rel="prefetch" href="/blogs/assets/React.html-659a8167.js" as="script"><link rel="prefetch" href="/blogs/assets/ReactRouter.html-dc674066.js" as="script"><link rel="prefetch" href="/blogs/assets/Redux.html-9f749333.js" as="script"><link rel="prefetch" href="/blogs/assets/StudyTutorial.html-f43ec5ce.js" as="script"><link rel="prefetch" href="/blogs/assets/uniapp.html-9ec54961.js" as="script"><link rel="prefetch" href="/blogs/assets/Pinia.html-1dcc52b7.js" as="script"><link rel="prefetch" href="/blogs/assets/Vue3.html-48a9f634.js" as="script"><link rel="prefetch" href="/blogs/assets/VueApi.html-684b02dc.js" as="script"><link rel="prefetch" href="/blogs/assets/VueRouter.html-6184995c.js" as="script"><link rel="prefetch" href="/blogs/assets/Vuex4.html-1fce3133.js" as="script"><link rel="prefetch" href="/blogs/assets/vue_notes.html-096e3b77.js" as="script"><link rel="prefetch" href="/blogs/assets/404.html-8fc28dc8.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/blogs/" class=""><img class="logo" src="https://cdn.pixabay.com/animation/2022/08/05/07/12/07-12-14-597_512.gif" alt="PERSIST"><span class="site-name can-hide">PERSIST</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>html</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/html.html" class="" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/html5.html" class="" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>css</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/css.html" class="" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/css3.html" class="" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>JavaScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/blogs/base/JavaScript.html" class="router-link-active router-link-exact-active router-link-active" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>TypeScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/TypeScript.html" class="" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Vue"><span class="title">Vue</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Vue"><span class="title">Vue</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vue3.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueApi.html" class="" aria-label="Vue API"><!--[--><!--]--> Vue API <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueRouter.html" class="" aria-label="Vue Router"><!--[--><!--]--> Vue Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vuex4.html" class="" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Pinia.html" class="" aria-label="Pinia"><!--[--><!--]--> Pinia <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="React"><span class="title">React</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="React"><span class="title">React</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/React.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/ReactRouter.html" class="" aria-label="React Router"><!--[--><!--]--> React Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/Redux.html" class="" aria-label="Redux"><!--[--><!--]--> Redux <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>三剑客</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/base.html" class="" aria-label="三剑客"><!--[--><!--]--> 三剑客 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/vue.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>uni-app</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/uniapp/uniapp.html" class="" aria-label="uni-app 教程"><!--[--><!--]--> uni-app 教程 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/case/uniapp.html" class="" aria-label="uni-app"><!--[--><!--]--> uni-app <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/react.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>大屏</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/bigscreen.html" class="" aria-label="大屏"><!--[--><!--]--> 大屏 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/blogs/StudyTutorial/StudyTutorial.md" class="" aria-label="学习教程"><!--[--><!--]--> 学习教程 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/blogs/handbook/handbook.md" class="" aria-label="前端手册"><!--[--><!--]--> 前端手册 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/fayuanpersist/blogs" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="三剑客"><span class="title">三剑客</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>html</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/html.html" class="" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/html5.html" class="" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>css</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/css.html" class="" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/base/css3.html" class="" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>JavaScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a aria-current="page" href="/blogs/base/JavaScript.html" class="router-link-active router-link-exact-active router-link-active" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>TypeScript</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/base/TypeScript.html" class="" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="Vue"><span class="title">Vue</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="Vue"><span class="title">Vue</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vue3.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueApi.html" class="" aria-label="Vue API"><!--[--><!--]--> Vue API <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/VueRouter.html" class="" aria-label="Vue Router"><!--[--><!--]--> Vue Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Vuex4.html" class="" aria-label="Vuex"><!--[--><!--]--> Vuex <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/Vue/Pinia.html" class="" aria-label="Pinia"><!--[--><!--]--> Pinia <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="React"><span class="title">React</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="React"><span class="title">React</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/React.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React Router</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/ReactRouter.html" class="" aria-label="React Router"><!--[--><!--]--> React Router <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>状态管理</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/React/Redux.html" class="" aria-label="Redux"><!--[--><!--]--> Redux <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="经典案例"><span class="title">经典案例</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>三剑客</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/base.html" class="" aria-label="三剑客"><!--[--><!--]--> 三剑客 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>Vue</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/vue.html" class="" aria-label="Vue"><!--[--><!--]--> Vue <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>uni-app</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/uniapp/uniapp.html" class="" aria-label="uni-app 教程"><!--[--><!--]--> uni-app 教程 <!--[--><!--]--></a></li><li class="navbar-dropdown-subitem"><a href="/blogs/case/uniapp.html" class="" aria-label="uni-app"><!--[--><!--]--> uni-app <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>React</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/react.html" class="" aria-label="React"><!--[--><!--]--> React <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><li class="navbar-dropdown-item"><!--[--><h4 class="navbar-dropdown-subtitle"><span>大屏</span></h4><ul class="navbar-dropdown-subitem-wrapper"><!--[--><li class="navbar-dropdown-subitem"><a href="/blogs/case/bigscreen.html" class="" aria-label="大屏"><!--[--><!--]--> 大屏 <!--[--><!--]--></a></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-item"><a href="/blogs/StudyTutorial/StudyTutorial.md" class="" aria-label="学习教程"><!--[--><!--]--> 学习教程 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/blogs/handbook/handbook.md" class="" aria-label="前端手册"><!--[--><!--]--> 前端手册 <!--[--><!--]--></a></div><div class="navbar-item"><a class="external-link" href="https://gitee.com/fayuanpersist/blogs" rel="noopener noreferrer" target="_blank" aria-label="Gitee"><!--[--><!--]--> Gitee <span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span><!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">html <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/base/html.html" class="sidebar-item" aria-label="HTML"><!--[--><!--]--> HTML <!--[--><!--]--></a><!----></li><li><a href="/blogs/base/html5.html" class="sidebar-item" aria-label="HTML 5"><!--[--><!--]--> HTML 5 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">css <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/base/css.html" class="sidebar-item" aria-label="CSS"><!--[--><!--]--> CSS <!--[--><!--]--></a><!----></li><li><a href="/blogs/base/css3.html" class="sidebar-item" aria-label="CSS 3"><!--[--><!--]--> CSS 3 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading active collapsible">JavaScript <span class="down arrow"></span></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/blogs/base/JavaScript.html" class="router-link-active router-link-exact-active router-link-active sidebar-item active" aria-label="JavaScript"><!--[--><!--]--> JavaScript <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-模块化" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 模块化"><!--[--><!--]--> JS 模块化 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-基本语法形式" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 基本语法形式"><!--[--><!--]--> JS 基本语法形式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-变量" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 变量"><!--[--><!--]--> JS 变量 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-数据类型" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 数据类型"><!--[--><!--]--> JS 数据类型 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-运算符" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 运算符"><!--[--><!--]--> JS 运算符 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-数据的存储原理" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 数据的存储原理"><!--[--><!--]--> JS 数据的存储原理 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-函数" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 函数"><!--[--><!--]--> JS 函数 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-数组" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 数组"><!--[--><!--]--> JS 数组 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-数组方法" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 数组方法"><!--[--><!--]--> JS 数组方法 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-对象" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 对象"><!--[--><!--]--> JS 对象 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-字符串" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 字符串"><!--[--><!--]--> JS 字符串 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-math内置对象" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS Math内置对象"><!--[--><!--]--> JS Math内置对象 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-时间对象" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 时间对象"><!--[--><!--]--> JS 时间对象 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-定时器-延时器" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 定时器 延时器"><!--[--><!--]--> JS 定时器 延时器 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-dom-操作" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS DOM 操作"><!--[--><!--]--> JS DOM 操作 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-bom-操作" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS BOM 操作"><!--[--><!--]--> JS BOM 操作 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-节点-操作" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 节点 操作"><!--[--><!--]--> JS 节点 操作 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-常见事件类型" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 常见事件类型"><!--[--><!--]--> JS 常见事件类型 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-es6语法" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS ES6语法"><!--[--><!--]--> JS ES6语法 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-es6-map-与-set" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS ES6 Map 与 Set"><!--[--><!--]--> JS ES6 Map 与 Set <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-es6-箭头函数" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS ES6 箭头函数"><!--[--><!--]--> JS ES6 箭头函数 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-this指向" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS this指向"><!--[--><!--]--> JS this指向 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-面向对象编程" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 面向对象编程"><!--[--><!--]--> JS 面向对象编程 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-原型-原型链" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 原型 原型链"><!--[--><!--]--> JS 原型 原型链 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-继承" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 继承"><!--[--><!--]--> JS 继承 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-正则表达式" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 正则表达式"><!--[--><!--]--> JS 正则表达式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-递归函数" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 递归函数"><!--[--><!--]--> JS 递归函数 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-闭包" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 闭包"><!--[--><!--]--> JS 闭包 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-常见的模式" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 常见的模式"><!--[--><!--]--> JS 常见的模式 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#http协议" class="router-link-active router-link-exact-active sidebar-item" aria-label="http协议"><!--[--><!--]--> http协议 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#ajax" class="router-link-active router-link-exact-active sidebar-item" aria-label="ajax"><!--[--><!--]--> ajax <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#promise" class="router-link-active router-link-exact-active sidebar-item" aria-label="promise"><!--[--><!--]--> promise <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#js-同源-跨域-请求" class="router-link-active router-link-exact-active sidebar-item" aria-label="JS 同源/跨域 请求"><!--[--><!--]--> JS 同源/跨域 请求 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#浏览器-本地存储" class="router-link-active router-link-exact-active sidebar-item" aria-label="浏览器 本地存储"><!--[--><!--]--> 浏览器 本地存储 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#nodejs" class="router-link-active router-link-exact-active sidebar-item" aria-label="nodejs"><!--[--><!--]--> nodejs <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#模块化开发" class="router-link-active router-link-exact-active sidebar-item" aria-label="模块化开发"><!--[--><!--]--> 模块化开发 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#内置模块" class="router-link-active router-link-exact-active sidebar-item" aria-label="内置模块"><!--[--><!--]--> 内置模块 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#创建-服务器" class="router-link-active router-link-exact-active sidebar-item" aria-label="创建 服务器"><!--[--><!--]--> 创建 服务器 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#npm" class="router-link-active router-link-exact-active sidebar-item" aria-label="npm"><!--[--><!--]--> npm <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#路由表" class="router-link-active router-link-exact-active sidebar-item" aria-label="路由表"><!--[--><!--]--> 路由表 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/blogs/base/JavaScript.html#中间件" class="router-link-active router-link-exact-active sidebar-item" aria-label="中间件"><!--[--><!--]--> 中间件 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading collapsible">TypeScript <span class="right arrow"></span></p><ul style="display:none;" class="sidebar-item-children"><!--[--><li><a href="/blogs/base/TypeScript.html" class="sidebar-item" aria-label="TypeScript"><!--[--><!--]--> TypeScript <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="javascript" tabindex="-1"><a class="header-anchor" href="#javascript" aria-hidden="true">#</a> JavaScript</h1><blockquote><p>轻量级的编程语言、行为（Behavior）</p></blockquote><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_overview" target="_blank" rel="noopener noreferrer">JavaScript - 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a><br><a href="https://www.w3school.com.cn/js/index.asp" target="_blank" rel="noopener noreferrer">w3school - JavaScript - 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a><br><a href="https://www.runoob.com/js/js-tutorial.html" target="_blank" rel="noopener noreferrer">菜鸟教程 - JavaScript - 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a><br><a href="https://www.w3cschool.cn/javascript/" target="_blank" rel="noopener noreferrer">w3cschool - JavaScript - 文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a><br><a href="https://c.runoob.com/front-end/61/" target="_blank" rel="noopener noreferrer">在线工具 | 菜鸟工具<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="js-模块化" tabindex="-1"><a class="header-anchor" href="#js-模块化" aria-hidden="true">#</a> JS 模块化</h2><blockquote><p>复用性、可维护性</p></blockquote><p><strong>Commonjs 规范</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//导出一个模块</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">//引入一个模块</span>
<span class="token keyword">const</span> moduleName <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;xxx&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>es module 规范</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 导出 一个模块</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 引入一个模块</span>
<span class="token keyword">import</span> moduleName <span class="token keyword">from</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="js-基本语法形式" tabindex="-1"><a class="header-anchor" href="#js-基本语法形式" aria-hidden="true">#</a> JS 基本语法形式</h2><blockquote><p>JavaScript 的语法形式 类似于 css 语法形式</p></blockquote><ul><li><strong>行内式</strong></li></ul><p>在标签内部直接定义 js 代码 (实际项目中绝对禁止使用)</p><ul><li><strong>内部式</strong></li></ul><p>在 script 标签中 定义 js 代码</p><ul><li><strong>外部式</strong></li></ul><p>在 外部 js 文件中 定义 js 代码<br> 通过 scirpt 标签 src 属性 导入外部 js 文件</p><details class="custom-container details"><summary>代码 <span class="badge tip" style=""><!--[-->演示<!--]--></span></summary><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-UA-Compatible<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IE=edge<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 1.行内式 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value javascript language-javascript">window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&#39;我是js定义的代码内容!&#39;</span><span class="token punctuation">)</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>嘿呀😉😉😉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 2.内部式 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>嘿呀😉😉😉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token comment">// 在 script标签中 对 div标签 进行交互操作</span>
      <span class="token keyword">const</span> oDiv <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      oDiv<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>width <span class="token operator">=</span> <span class="token string">&quot;400px&quot;</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>height <span class="token operator">=</span> <span class="token string">&quot;200px&quot;</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>background <span class="token operator">=</span> <span class="token string">&quot;pink&quot;</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token comment">// 内部式 总结</span>
      <span class="token comment">// 1. 计算机程序代码 默认的执行顺序是 从上至下 从左至右( 文档流顺序 )</span>
      <span class="token comment">// 2. script标签 style标签 理论上可以定义在 html文件的任意位置</span>
      <span class="token comment">// 3. 因为代码的执行顺序问题</span>
      <span class="token comment">//    js程序要操作 html标签 就要先 定义生成html标签</span>
      <span class="token comment">//    实际项目中 一半都将 script标签 也就是 js程序 (定义在 body标签中 html标签下)</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 3.外部式 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./demo.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      <span class="token comment">// JavaScript代码的执行机制  script标签定义了src属性 这个内部式代码就不会执行了</span>
      window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&#39;我是内部式程序&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-变量" tabindex="-1"><a class="header-anchor" href="#js-变量" aria-hidden="true">#</a> JS 变量</h2><ul><li><strong>概念</strong></li></ul><p>存储在内存中的 带有名称的数据信息 其中存储的数据信息 在程序执行的过程中 是 可以改变的。</p><details class="custom-container details"><summary>概念 <span class="badge tip" style=""><!--[-->理解<!--]--></span></summary><p><strong>理解</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>容器
存储数据的容器
这个容器 带有名称
这个容器 是 在 内存中
这个容器 存储的数据 可以改变
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>详细解释</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>在 计算机程序 中 数据是不能独立存储的
必须要有存储数据的容器
实际操作时 通过操作容器 解析其中存储的数据
再 操作这个容器中 存储的数据

在 JavaScript 程序中 存储 数据的容器 称为 变量
在 html程序中 存储 容器的容器 标签name属性的属性值
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><ul><li><strong>内存和内存特点</strong></li></ul><p>内存 是 计算机的硬件组成部分;</p><p>特点是: 临时存储数据、程序执行时数据存在、程序执行结束 数据自动 删除/释放</p><p>硬盘 u 盘 移动硬盘等 是 永久存储数据</p><ul><li><strong>变量定义声明的语法</strong></li></ul><p>例如: <strong>var num = 999;</strong></p><details class="custom-container details"><summary>var num = 999; <span class="badge tip" style=""><!--[-->详细解析<!--]--></span></summary><p><strong>var</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> 声明的关键词 <span class="token function">JavaScript程序会做特殊处理</span><span class="token punctuation">(</span>预解析<span class="token operator">/</span>预编译<span class="token operator">/</span>预解释<span class="token punctuation">)</span>
定义声明有一个变量一定要有关键词
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>num</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>变量名称
JavaScript命名规范
<span class="token number">1.</span> 【规则  必须遵守】 
   <span class="token function">只能使用、英文、数字、下划线、$</span><span class="token punctuation">(</span>不推荐使用<span class="token punctuation">)</span>、   
   不能以数字开头、严格区分大小写、    
   不能使用 保留词 关键词   

<span class="token number">2.</span> 【规范  建议遵守】 
   不要使用 中文特殊符号等内容 <span class="token function">作为变量名称</span><span class="token punctuation">(</span>当程序在服务器中运行时 一定会报错<span class="token punctuation">)</span>、
   推荐使用 小驼峰命名法、推荐定义变量名称 <span class="token function">见名知意</span><span class="token punctuation">(</span>语义化<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>=</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">=</span> 在 计算机程序中 成为 赋值符号
将 右侧 表达式的结果 赋值给 左侧变量存储

一定是 先计算 右侧表达式的结果
将 表达式的结果 赋值给左侧变量存储
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>999</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>右侧的表达式

所谓的表达式 就是 有结果的公式
可以是 计算公式 也可以是 一个数据 只要有 具体的结果 具体的值 就可以
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>;</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>JavaScript代码都要以分号结束
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>重复赋值</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>给 一个变量 多次赋值
<span class="token literal-property property">eg</span><span class="token operator">:</span> <span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">999</span><span class="token punctuation">;</span> num <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span> num <span class="token operator">=</span> <span class="token number">500</span><span class="token punctuation">;</span> 
    运行最终的结果是 <span class="token number">500</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-数据类型" tabindex="-1"><a class="header-anchor" href="#js-数据类型" aria-hidden="true">#</a> JS 数据类型</h2><p>对 JavaScript 数据类型的解析 有以下几点 :</p><ul><li>数据在计算机内存中存储方式不同</li><li>按照不同的存储方式 将 数据进行 分类</li><li>不同存储方式的数据 分类不同</li><li>成为 数据的 数据类型(存储方式)</li></ul><p><strong>JavaScript 中数据类型 分类</strong></p><details class="custom-container details"><summary>JS数据类型 <span class="badge tip" style=""><!--[-->分类<!--]--></span></summary><p><strong>基本数据类型 / 简单数据类型</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function">布尔类型</span><span class="token punctuation">(</span>boolean <span class="token operator">/</span> bool<span class="token punctuation">)</span> <span class="token operator">===</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>只有 <span class="token boolean">true</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token function">数值类型</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span>
    <span class="token function">整数类型</span><span class="token punctuation">(</span>integer <span class="token operator">/</span> int<span class="token punctuation">)</span>
    <span class="token function">浮点数类型</span><span class="token punctuation">(</span>float<span class="token punctuation">)</span>
    <span class="token number">NaN</span>
<span class="token function">字符串类型</span><span class="token punctuation">(</span>string <span class="token operator">/</span> str<span class="token punctuation">)</span>
<span class="token keyword">null</span>类型
<span class="token keyword">undefined</span>类型
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>引用数据类型 / 复杂数据类型</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>函数
数组
对象
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><em>对上面的 数据类型 进行解释说明</em></p><p><strong>1. 布尔类型(boolean / bool):</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>布尔类型只有两个数值
布尔类型 往往是 比较判断的执行结果

<span class="token boolean">true</span> <span class="token operator">===</span><span class="token operator">&gt;</span> 表示 真 <span class="token operator">/</span> 正确
<span class="token boolean">false</span> <span class="token operator">===</span><span class="token operator">&gt;</span> 表示 假 <span class="token operator">/</span> 错误

<span class="token boolean">true</span> <span class="token operator">/</span> <span class="token boolean">false</span> 是 <span class="token function">JavaScript中的关键词</span><span class="token punctuation">(</span>必须小写<span class="token punctuation">)</span> 可以直接赋值
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 字符串类型(string / str)</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>一串 由 字符 数字 符号等等内容组成的数据
字符串类型的表示 必须有 定界符
定界符中定义的内容 就是 字符串的内容

<span class="token comment">// 只要是 定界符包裹的 就是 串</span>
<span class="token comment">// 只要是 没有定界符包裹的 就是 值</span>

定界符的分类
单引号<span class="token string">&#39;&#39;</span> 和 双引号<span class="token string">&quot;&quot;</span>
    实际项目中推荐使用的定界符 执行效率更高

    单引号<span class="token operator">/</span>双引号 不能 包裹<span class="token operator">/</span>嵌套 自身
    单引号 双引号 中 内容不能换行
    单引号 双引号 中 不支持解析变量

    若一定要 嵌套或者换行 就必须 使用 JavaScript转义符
    <span class="token literal-property property">常见的转义字符有</span><span class="token operator">:</span>
    <span class="token comment">// \&#39; ===&gt; 表示一个 单引号 &#39;</span>
    <span class="token comment">// \&quot; ===&gt; 表示一个 双引号 &quot;</span>
    <span class="token comment">// \\ ===&gt; 表示一个 \</span>
    <span class="token comment">// \n ===&gt; 表示一个 换行</span>

反引号<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">(</span>模板字符串<span class="token punctuation">)</span>
    是 <span class="token constant">ES6</span> 新增的语法形式
    反引号中不能 包裹<span class="token operator">/</span>嵌套自身
    反引号中可以换行
    反引号中支持解析变量

    如果没有变量需要解析 推荐使用 单引号双引号 执行效率更高

    模板字符串 使用 $<span class="token punctuation">{</span><span class="token punctuation">}</span> 包裹变量 可以解析变量
    模板字符串 使用 $<span class="token punctuation">{</span><span class="token punctuation">}</span> 还可以 运算 JavaScript表达式
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3. 数值类型</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">3.1</span> 整数类型
    负整数 <span class="token number">0</span> 正整数

    其他进制整数的存储语法
        JavaScript中数值的存储输出 默认都是 按照 十进制数值进行的
        其他进制的数值 必须要 定义 标识符
        JavaScript程序才会按照 指定的进制 进行数据的存储

<span class="token number">3.2</span> 浮点数
    浮点数 就是 小数

    核心问题<span class="token number">1</span> 有效数值
        在 计算机程序中 不会允许小数的位数是 无穷多位
        在 JavaScript程序中 浮点数的 有效数值 最多<span class="token number">17</span>位
        从左起 第一个 非<span class="token number">0</span>的数字 开始计算有效数值的位数
        也就是 所有的有效数值 最多 <span class="token number">17</span>个

    核心问题<span class="token number">2</span> 溢出 <span class="token operator">/</span> 精度丢失 <span class="token operator">/</span> 误差
        在 计算机程序中 浮点数的存储形式 是 以 近似值的形式存储数据
        即 <span class="token number">0.1</span> 存储的数据可能是 <span class="token number">0.100000000000002</span>

        在 浮点数直接运算 或者 比较时 一定会 出现 浮点数 的 误差 <span class="token operator">/</span> 溢出 <span class="token operator">/</span> 精度丢失

    核心问题<span class="token number">3</span> 科学计数法
        是 数值的一种 表现实行 表示语法
        <span class="token literal-property property">eg</span><span class="token operator">:</span> 数e数 <span class="token number">2e3</span> 的结果是 <span class="token number">6</span>

        科学计数法表达式的一切数值 都是 浮点数类型

        <span class="token comment">// 科学计数法 不算 整数的语法形式</span>

  <span class="token number">3.3</span> <span class="token number">NaN</span>
not a number
表达式运算结果 是 数值类型 但是 不是一个具体的数字

往往是 有 非数字 参与运算的结果

<span class="token number">NaN</span> 可以作为数据数值 直接赋值给变量
    赋值时 一定是 严格遵守大小写

核心<span class="token number">1</span>
    有 <span class="token number">NaN</span> 参与的运算结果 一定 还是 <span class="token number">NaN</span>

核心<span class="token number">2</span>
    两个 <span class="token number">NaN</span> 比较 是不是 相等 结果是 <span class="token boolean">false</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>4. null 和 undefined</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">null</span>  表示 空值
    是 正确赋值 但是 赋值的数据 是一个 <span class="token string">&#39;空&#39;</span> 值

<span class="token keyword">undefined</span> 表示 应该赋值 没有正确赋值
    在 定义变量时 应该给变量赋值存储的数据
    如果 只是定义变量 没有赋值存储的数据
    JavaScript程序 会给没有赋值数据的变量 存储 <span class="token keyword">undefined</span> 数据

<span class="token keyword">null</span> 和 <span class="token keyword">undefined</span> 都可以作为数值 直接赋值给变量
必须都是 小写字符

</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>JavaScript 中数据类型 检测</strong></p><details class="custom-container details"><summary>JS数据类型 <span class="badge tip" style=""><!--[-->检测<!--]--></span></summary><p><strong>1.typeof</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>语法
    <span class="token keyword">typeof</span><span class="token punctuation">(</span> 变量 <span class="token operator">/</span> 数据 <span class="token punctuation">)</span>
    <span class="token keyword">typeof</span> 变量 <span class="token operator">/</span> 数据

执行结果返回值是 数据的数据类型
返回值 是 字符串类型的内容

<span class="token function">布尔类型</span><span class="token punctuation">(</span>boolean<span class="token punctuation">)</span>

<span class="token function">数值类型</span><span class="token punctuation">(</span>number<span class="token punctuation">)</span>
整数 浮点数 <span class="token number">NaN</span> 科学计数法
在 JavaScript中 整数 浮点数的数据类型 没有区别

<span class="token function">字符串类型</span><span class="token punctuation">(</span>string<span class="token punctuation">)</span>

<span class="token keyword">undefined</span><span class="token punctuation">(</span><span class="token keyword">undefined</span><span class="token punctuation">)</span>

<span class="token keyword">null</span> <span class="token operator">/</span> 数组 <span class="token operator">/</span> <span class="token function">对象</span> <span class="token punctuation">(</span>object<span class="token punctuation">)</span>  

<span class="token function">函数</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. isNaN()</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>判断 数据<span class="token operator">/</span>变量 是不是 <span class="token number">NaN</span> 类型

<span class="token literal-property property">原理</span><span class="token operator">:</span>
    <span class="token number">1</span><span class="token punctuation">,</span>  将数据 自动转化为数值类型
    <span class="token number">2</span><span class="token punctuation">,</span>  再去判断 转化的结果 是不是 <span class="token number">NaN</span>

<span class="token literal-property property">结果</span><span class="token operator">:</span>
    如果 转化结果 是 <span class="token number">NaN</span> 返回值 是 <span class="token boolean">true</span>
    如果 转化结果 不是 <span class="token number">NaN</span> 返回值 是 <span class="token boolean">false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><p><strong>JavaScript 中数据类型 转化</strong></p><details class="custom-container details"><summary>JS数据类型 <span class="badge tip" style=""><!--[-->转化<!--]--></span></summary><p><strong>数据类型的转化原理:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>JavaScript是 弱类型 计算机语言 语法结构比较松散不严谨
定义变量时 不限制变量储存数据的数据类型 
也就是 一个变量 可以存储任意类型的数据
在 定义变量时 可以 同时给变量赋值 

如果是强类型的计算机语言 例如 java
是 先定义变量 设定变量存储数据的数据类型
再 对变量进行赋值 
如果赋值的数据 和 变量设定的存储的数据的数据类型不同
不能对变量进行赋值

计算机程序执行时 有些程序执行 需要 指定类型的数据
如果变量中存储的是其他类类的数据
需要将数据转化为对应的数据类型
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>转化方法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>自动转化 <span class="token operator">/</span> 隐式转化
    计算机程序执行时 自动完成的数据类型转化

强制转化 <span class="token operator">/</span> 人为转化
    程序员 通过 JavaScript定义的函数 完成的 数据类型转化
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>1. 自动转化:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>核心
    什么时候转化
    怎么转化

自动转化为 字符串类型 
    字符串拼接 时 触发自动转化
    
    将 数据 转化为对应的 字符串内容


自动转化为 数值类型
    算数运算符时触发 
        <span class="token operator">!</span> 有字符串参与的 <span class="token operator">+</span> 加号运算 执行的是 字符串拼接

    <span class="token number">1</span>
        <span class="token boolean">true</span>

    <span class="token number">0</span>
        <span class="token boolean">false</span>   <span class="token string">&#39;&#39;</span>  <span class="token string">&#39;   &#39;</span>   <span class="token keyword">null</span> 

    对应数值
        字符串内容符合数字语法

    <span class="token number">NaN</span>
        <span class="token keyword">undefined</span>   字符串内容不符合数字语法


自动转化为 布尔类型
    <span class="token keyword">if</span>语句  三元运算符  逻辑运算符

    <span class="token boolean">false</span>
        <span class="token number">0</span>   <span class="token number">0.0000</span><span class="token punctuation">.</span><span class="token punctuation">.</span>    <span class="token keyword">null</span>    <span class="token keyword">undefined</span>   <span class="token number">NaN</span>     <span class="token string">&#39;&#39;</span>

    <span class="token boolean">true</span>    
        其他情况都转化为 <span class="token boolean">true</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 强制转化:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>转化为 布尔类型
    <span class="token function">Boolean</span><span class="token punctuation">(</span> 变量 <span class="token operator">/</span> 表达式 <span class="token punctuation">)</span>
        不会改变 变量中存储的原始数据
        转化原则和自动转化完全相同

转化为 字符串类型
    <span class="token function">String</span><span class="token punctuation">(</span> 变量 <span class="token operator">/</span> 表达式 <span class="token punctuation">)</span>
        不会改变 变量中存储的原始数据
        转化原则和自动转化完全相同

    变量<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        不会改变 变量中存储的原始数据
        转化原则和自动转化完全相同

        <span class="token operator">!</span> 如果变量中存储的是整数 可以设定转化的进制
            范围是 <span class="token number">2</span> <span class="token operator">-</span> <span class="token number">36</span> 

        <span class="token operator">!</span> 如果变量中存储的是 <span class="token keyword">null</span> 或者 <span class="token keyword">undefined</span> 不支持


转化为 数值类型
    <span class="token function">Number</span><span class="token punctuation">(</span> 变量 <span class="token operator">/</span> 表达式 <span class="token punctuation">)</span>
        不会改变 变量中存储的原始数据
        转化原则和自动转化完全相同

    <span class="token function">parseInt</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        获取 整数部分 
        从左起 获取 数据中 符合整数语法的内容
        如果左起第一个内容不符合整数语法 结果是 <span class="token number">NaN</span>

        <span class="token operator">!</span> <span class="token boolean">true</span> <span class="token boolean">false</span> <span class="token keyword">undefined</span> <span class="token keyword">null</span> 等 结果 都是 <span class="token number">NaN</span>
        <span class="token operator">!</span> <span class="token string">&#39;100px&#39;</span> 这样的字符串结果是 整数<span class="token number">100</span>
        <span class="token operator">!</span> 不能识别 字符串内容是 科学计数法的语法形式 <span class="token string">&#39;2e3&#39;</span> 获取的结果是 <span class="token number">2</span>

    
    <span class="token function">parseFloat</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        获取 浮点数部分 
        从左起 获取 数据中 符合浮点数语法的内容
        如果左起第一个内容不符合浮点数语法 结果是 <span class="token number">NaN</span>

        <span class="token operator">!</span> 可以识别 字符串内容是 科学计数法的语法形式 <span class="token string">&#39;2e3&#39;</span> 获取的结果是 <span class="token number">2000</span>       
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-运算符" tabindex="-1"><a class="header-anchor" href="#js-运算符" aria-hidden="true">#</a> JS 运算符</h2><details class="custom-container details"><summary>JS运算符 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>JavaScript程序定义的 带有特殊功能的符号
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>分类:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1.</span>字符串拼接运算符
    <span class="token operator">+</span>
        符号两侧有字符串参与 执行的是字符串拼接运算

<span class="token number">2.</span>算数运算符
    <span class="token operator">+</span>   <span class="token operator">-</span>   <span class="token operator">*</span>   <span class="token operator">/</span>   <span class="token operator">%</span>

    <span class="token operator">/</span>
        如果除数是 <span class="token number">0</span> 执行结果是 <span class="token number">Infinity</span>

    <span class="token operator">%</span>
        求余数 求模 运算
        获取两个数相除的余数结果
        获取的结果 符号和被除数相同
        如果整除 余数是 <span class="token number">0</span>


<span class="token number">3.</span>赋值运算符

    <span class="token operator">=</span>   <span class="token operator">+=</span>   <span class="token operator">-=</span>   <span class="token operator">*=</span>   <span class="token operator">/=</span>   <span class="token operator">%=</span>

<span class="token number">4.</span>比较运算符
    <span class="token operator">&gt;</span>   <span class="token operator">&lt;</span>   <span class="token operator">&gt;=</span>   <span class="token operator">&lt;=</span>   <span class="token operator">==</span>   <span class="token operator">===</span>   <span class="token operator">!=</span>   <span class="token operator">!==</span>

<span class="token number">5.</span>自增自减运算符
    <span class="token operator">++</span>   <span class="token operator">--</span>

<span class="token number">6.</span>逻辑运算符
    <span class="token operator">&amp;&amp;</span>   <span class="token operator">||</span>   <span class="token operator">!</span>

<span class="token number">7.</span>三元运算符
    执行逻辑 就是 简单的 <span class="token keyword">if</span><span class="token operator">...</span><span class="token keyword">else</span>语法

    语法形式<span class="token number">1</span> <span class="token operator">===</span><span class="token operator">&gt;</span> 执行
        表达式 <span class="token operator">?</span> 程序<span class="token number">1</span> <span class="token operator">:</span> 程序<span class="token number">2</span> <span class="token punctuation">;</span>
            表达式 结果是 <span class="token boolean">true</span>  执行程序<span class="token number">1</span>
            表达式 结果是 <span class="token boolean">false</span> 执行程序<span class="token number">2</span>

    语法形式<span class="token number">2</span> <span class="token operator">===</span><span class="token operator">&gt;</span> 赋值
        <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 表达式 <span class="token operator">?</span> 数据<span class="token number">1</span> <span class="token operator">:</span> 数据<span class="token number">2</span> <span class="token punctuation">;</span>
            表达式 结果是 <span class="token boolean">true</span>  给变量 赋值 数据<span class="token number">1</span>
            表达式 结果是 <span class="token boolean">false</span> 给变量 赋值 数据<span class="token number">2</span>
        
    语法形式<span class="token number">3</span> <span class="token operator">===</span><span class="token operator">&gt;</span> 解析
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> 表达式 <span class="token operator">?</span> 数据<span class="token number">1</span> <span class="token operator">:</span> 数据<span class="token number">2</span> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
            表达式 结果是 <span class="token boolean">true</span>  三元运算符在模板字符串中 解析的结果是 数据<span class="token number">1</span>
            表达式 结果是 <span class="token boolean">false</span> 三元运算符在模板字符串中 解析的结果是 数据<span class="token number">2</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-数据的存储原理" tabindex="-1"><a class="header-anchor" href="#js-数据的存储原理" aria-hidden="true">#</a> JS 数据的存储原理</h2><details class="custom-container details"><summary>JS数据的存储 <span class="badge tip" style=""><!--[-->原理<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">基本数据类型</span><span class="token operator">:</span>
    存储在 栈 中 
    有序存储
        先定义的变量 存储在 栈 的下方
        后定义的变量 存储在 栈 的上方
    变量中直接存储 数据
    
    调用基本数据类型 
        直接 解析变量中存储的数据数值

    

<span class="token literal-property property">引用数据类型</span><span class="token operator">:</span>
    存储在 堆 中
    无序存储 
    在 堆 中开辟独立的存储空间 
    操作系统给存储空间赋值设定 内存地址
    引用数据类型 数据数值<span class="token operator">/</span>代码程序 存储在 存储空间中
    变量<span class="token operator">/</span>函数名称 存储在 栈 中 
    变量<span class="token operator">/</span>函数名称 中 存储的是 引用数据类型的内存地址

    调用 引用数据类型 
        解析读取 栈 中 变量<span class="token operator">/</span>函数名称中 存储的内存地址
        按照 内存地址找到 堆 中的存储空间
        读取存储空间中 存储的 数据数值<span class="token operator">/</span>代码程序

基本数据类型 比较判断的是 变量中存储的 数据数值
引用数据类型 比较判断的是 变量<span class="token operator">/</span>函数名称中存储的 内存地址
    <span class="token operator">**</span>两个引用数据类型 直接比较判断 结果 永远是 <span class="token boolean">false</span><span class="token operator">**</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="/blogs/assets/JavaScript变量储存基本原理-7917c55a.jpg" alt="JavaScript变量储存基本原理"></p></details><h2 id="js-函数" tabindex="-1"><a class="header-anchor" href="#js-函数" aria-hidden="true">#</a> JS 函数</h2><blockquote><p>对比 break return throw</p></blockquote><details class="custom-container details"><summary>JS函数 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>函数</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>预解析 <span class="token operator">/</span> 预编译 <span class="token operator">/</span> 预解释
    是 JavaScript程序一种执行机制

    在 正式执行JavaScript程序之前 先将所有的js程序代码 预读 一遍
    对 <span class="token keyword">var</span> 声明的变量 <span class="token keyword">function</span>声明的函数 做 特殊处理

    处理的结果是 
        <span class="token keyword">var</span> 声明的变量 提前调用结果是 <span class="token keyword">undefined</span>
        <span class="token keyword">function</span> 声明的变量 提前调用结果是 正常执行

        声明式函数 <span class="token operator">/</span> 普通函数 提前调用 可以正常执行
            <span class="token function-variable function">语法</span><span class="token operator">:</span>
            <span class="token keyword">function</span> <span class="token function">函数名称</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>形参 <span class="token punctuation">,</span> 形参<span class="token operator">=</span>默认值 <span class="token operator">...</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            程序<span class="token punctuation">;</span>
            <span class="token keyword">return</span> 返回值<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

        赋值式函数 <span class="token operator">/</span> 匿名函数 本质是在定义变量 
            提前调用 变量中存储的是 <span class="token keyword">undefined</span> 作为函数调用结果是报错
            <span class="token literal-property property">语法</span><span class="token operator">:</span>
            <span class="token keyword">var</span> <span class="token function-variable function">变量</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">[</span>形参 <span class="token punctuation">,</span> 形参<span class="token operator">=</span>默认值 <span class="token operator">...</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                程序<span class="token punctuation">;</span>
                <span class="token keyword">return</span> 返回值<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>变量的作用域</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>全局变量
    定义在 函数外的变量 称为 全局变量
    可以 在函数内和函数外 都能调用

局部变量 <span class="token operator">/</span> 私有变量
    定义在 函数内的变量 或者 形参 称为 局部变量
    只能在函数内部调用 
    不能在函数外部直接调用
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>函数中变量的调用原则</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>就近原则

自己有调用自己的
自己没有调用父级程序的
父级程序没有调用全局的
全局没有 调用结果是 报错

永远不会调用 后代程序的
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>函数中变量的赋值原则</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>就近原则

自己有这个变量 对 自己的变量赋值
自己没有这个变量 对 父级变量赋值
父级程序没有这个变量 对 全局变量赋值
全局没有这个变量 
    变量的赋值语句 升级为变量的声明语句
    声明一个 全局变量 在函数外可以调用

绝对不会对 后代变量 赋值
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>函数的封装调用的基本过程</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>封装
    <span class="token number">1</span><span class="token punctuation">,</span>  在 堆 中开辟一个独立的存储空间准备存储引用数据类型
        操作系统给这个存储空间定义内存地址

    <span class="token number">2</span><span class="token punctuation">,</span>  函数程序代码 以 字符串形式 存储在 存储空间中

    <span class="token number">3</span><span class="token punctuation">,</span>  函数名称存储在 栈 中
        函数名称中存储的是 函数的内存地址

调用
    <span class="token number">1</span><span class="token punctuation">,</span>  在 栈 中 找到 函数名称 读取其中存储的内存地址
        按照内存地址 找到 堆 中 对应的存储空间
        解析其中存储的函数程序字符串

    <span class="token number">2</span><span class="token punctuation">,</span>  给 函数的形参 赋值 实参

    <span class="token number">3</span><span class="token punctuation">,</span>  预解析函数程序代码

    <span class="token number">4</span><span class="token punctuation">,</span>  执行 函数程序
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>一些面试题的核心</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1.</span>  预解析的面试题

    变量名称重复 
        正常调用    调用的是 最后一个定义的
        提前调用    结果是 <span class="token keyword">undefined</span>

    函数名称重复
        正常调用    调用的是 最后一个定义的
        提前调用    调用的是 最后一个定义的

    变量名称 和 函数名称重复
        正常调用    调用的是 变量
        提前调用    调用的是 函数

    赋值式函数按照变量处理

<span class="token number">2.</span>  <span class="token function">函数中数据的调用</span>

    <span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> 先看 函数中 有没有 定义声明这个变量
        如果定义声明了这个变量 一定只会调用函数中的这个变量
            正常调用 就是 这个变量储存的数据
            提前调用 就是 <span class="token keyword">undefined</span>
        
        如果没有定义这个变量
            找父级程序 <span class="token operator">/</span> 全局变量 <span class="token function">调用</span>

    <span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> 如果 整个程序 都没有定义这个变量
        看 有没有 赋值程序  
            如果有赋值程序 赋值程序 会 升级为变量的声明语句
                正常调用 就是 这个变量赋值的数据
                提前调用 就是 报错

            如果没有赋值程序 调用都是报错
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>名词解释</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1</span><span class="token punctuation">.</span>function
    声明函数的关键词 告诉 JavaScript程序 我们在声明一个函数

<span class="token number">2.</span>形参
    在 封装函数时 定义在 <span class="token function">函数</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> 中的 

    本质 就是 定义在函数中的变量 
    调用 函数时 可以通过实参 给 形参赋值实际的数据

    在 定义形参时 也可以给 形参赋值默认值

    函数可以有形参 可以没有形参 可以有多个形参

    JavaScript函数中 形参还以有其他的语法形式 
    我们之后讲 展开合并运算符 时候讲

<span class="token number">3.</span>实参
    在 调用函数时 定义在 <span class="token function">函数</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> 中的

    本质是 给 形参赋值的数据 

    按照顺序 给 形参 一一对应 赋值 

<span class="token number">4</span><span class="token punctuation">.</span>return
    定义一个函数的 执行结果 <span class="token operator">/</span> 返回值

    定义在函数内部的数据 在函数外部不能直接调用
    如果要调用函数内部的数据 需要通过 <span class="token keyword">return</span> 定义返回值
    将 数据抛出函数之外 
    函数的执行结果<span class="token operator">/</span>返回值 就是 <span class="token keyword">return</span> 定义的数据

    <span class="token keyword">return</span>定义的数据 可以 任意的操作使用

    <span class="token keyword">return</span>可以终止函数中 之后程序的执行

<span class="token number">5.</span>对比 <span class="token keyword">break</span> <span class="token keyword">return</span> <span class="token keyword">throw</span>

    <span class="token keyword">break</span> 只能 终止 循环内的程序

    <span class="token keyword">return</span> 只能 终止 函数中的程序

    <span class="token keyword">throw</span> 能终止 整个 js程序的执行
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-数组" tabindex="-1"><a class="header-anchor" href="#js-数组" aria-hidden="true">#</a> JS 数组</h2><details class="custom-container details"><summary>JS数组 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>存储数据的集合
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>理解:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>其他数据类型 一个变量中只能存储一个数据单元
在数组中可以同时存储多个数据单元
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>字面量
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token punctuation">[</span>数据<span class="token number">1</span> <span class="token punctuation">,</span> 数据<span class="token number">2</span> <span class="token punctuation">,</span> 数据<span class="token number">3.</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

构造函数
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span>数据<span class="token number">1</span> <span class="token punctuation">,</span> 数据<span class="token number">2</span> <span class="token punctuation">,</span> 数据<span class="token number">3.</span><span class="token operator">...</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>属性:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>下标
    在定义数组时 JavaScript程序 自动定义的从<span class="token number">0</span>开始的连续整数
    如果下标是 数值类型 称为 索引下标
        在 JavaScript中 下标只支持是数值类型的索引下标
        在 其他计算机语言中 数组的下标可以是字符串类型 称为 关联下标
    通过 索引下标 使用 <span class="token punctuation">[</span><span class="token punctuation">]</span>语法 操作 数组中的数据单元

length
    数组的长度 也就是 数组中单元个数
    语法 数组<span class="token punctuation">.</span>length
    索引下标是从<span class="token number">0</span>开始的连续整数 
        数组索引下标的范围是 <span class="token number">0</span> 至 数组<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span> 
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数据存储的数据类型:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>在 JavaScript语言中 数组中可以存储任意 JavaScript支持的数据类型
一个数组中 可以 存储不同类型的数据
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数组中存储函数:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token number">300</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">;</span>
    一般情况下 数组中 不会存储函数
    数组<span class="token punctuation">[</span>索引下标<span class="token punctuation">]</span> 获取的是 数组单元中存储的内存地址
    数组<span class="token punctuation">[</span>索引下标<span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 是 调用执行 数组中存储的函数
</code></pre><div class="highlight-lines"><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数组中存储数组:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>多维数组的调用

<span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token number">300</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">400</span><span class="token punctuation">,</span><span class="token number">500</span><span class="token punctuation">,</span><span class="token number">600</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token number">700</span><span class="token punctuation">,</span><span class="token number">800</span><span class="token punctuation">,</span><span class="token number">900</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    使用 多个并列的 <span class="token punctuation">[</span><span class="token punctuation">]</span>语法 
    调用对应的多维数组 获取其中存储的数据
    
    如果需要调用<span class="token number">800</span>
        arr<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>

    实际项目 会使用 解构赋值语法 对 多维数组进行数据获取
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数组中存储对象:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">1</span> <span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;张三&#39;</span> <span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">18</span> <span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">&#39;男&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">2</span> <span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;李四&#39;</span> <span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">19</span> <span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">&#39;女&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">3</span> <span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;王五&#39;</span> <span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">20</span> <span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">&#39;男&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">4</span> <span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;赵六&#39;</span> <span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">21</span> <span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">&#39;女&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">5</span> <span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span><span class="token string">&#39;刘七&#39;</span> <span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span><span class="token number">22</span> <span class="token punctuation">,</span> <span class="token literal-property property">sex</span><span class="token operator">:</span><span class="token string">&#39;男&#39;</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

通过索引下标 获取 对应的对象 
再通过对象的取值语法 获取具体的数据

如果需要获取王五 
    arr<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>name
    arr<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token string">&#39;name&#39;</span><span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数组的基本操作方法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">获取</span><span class="token operator">:</span>
    数组<span class="token punctuation">[</span>索引下标<span class="token punctuation">]</span> 
        如果 索引下标不存在 获取结果是 <span class="token keyword">undefined</span>

<span class="token literal-property property">新增</span><span class="token operator">:</span>
    对 不存在的数组单元 进行赋值操作
    执行效果是 给数组新增单元 并且设定新增单元的索引下标 和 存储的数据数值

    新增单元的索引下标 必须是 连续的整数
    如果不是连续整数 会生成 empty 空单元
    调用 空单元 结果是 <span class="token keyword">undefined</span>

    数组<span class="token punctuation">[</span>索引下标<span class="token punctuation">]</span> <span class="token operator">=</span> 数值数据 <span class="token punctuation">;</span>
        实际项目中 一般使用函数方法 给数组新增单元

<span class="token literal-property property">修改</span><span class="token operator">:</span>
    对 已经存在的数组单元 进行 赋值操作
    执行效果是 后赋值的数据覆盖之前存储的原始数据

    数组<span class="token punctuation">[</span>索引下标<span class="token punctuation">]</span> <span class="token operator">=</span> 数值数据 <span class="token punctuation">;</span>
        索引下标 是 已经存在的
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数组的函数操作:</strong></p><blockquote><p>比较重要的</p></blockquote><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">首位新增</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span> 数据<span class="token number">1</span> <span class="token punctuation">,</span> 数据<span class="token number">2.</span><span class="token operator">...</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        在数组的首位新增数据单元 可以 新增一个单元 也可以新增多个单元
        执行结果返回值是 新增单元之后 新数组的length属性值

<span class="token literal-property property">末位新增</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span> 数据<span class="token number">1</span> <span class="token punctuation">,</span> 数据<span class="token number">2.</span><span class="token operator">...</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        在数组的末位新增数据单元 可以 新增一个单元 也可以新增多个单元
        执行结果返回值是 新增单元之后 新数组的length属性值

<span class="token literal-property property">首位删除</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        每次执行只能删除数组首位单元
        执行结果返回值是 删除单元存储的数据数值


<span class="token literal-property property">末位删除</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        每次执行只能删除数组末位单元
        执行结果返回值是 删除单元存储的数据数值

<span class="token literal-property property">指定删除</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 其他所有参数 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        参数<span class="token number">1</span>   删除起始位置的索引下标
            <span class="token number">0</span> 整数  起始位置的索引下标
            负数    从倒数第几个开始删除

        参数<span class="token number">2</span>   删除数组单元的个数
            <span class="token number">0</span> 整数  删除单元的个数
            负数    没有执行效果 也就是没有删除的单元

        其他所有参数 
            在删除位置写入的新增数据单元
            如果删除的是 <span class="token number">0</span> 个单元 新增写入的单元 在 删除起始位置前新增单元

数组 <span class="token operator">===</span><span class="token operator">&gt;</span> 字符串<span class="token operator">:</span> 
    获取数组中每一个数据单元存储的数据数值 拼接成一个字符串

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        没有设定参数 间隔符号 默认是 <span class="token punctuation">,</span> 逗号

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39;间隔符号&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        设定间隔符号 以 间隔符号为间隔 拼接生成字符串

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        设定间隔符号 为 空字符串 也就是 没有间隔符号

字符串 <span class="token operator">===</span><span class="token operator">&gt;</span> 数组<span class="token operator">:</span>

    将 字符串 按照 指定的内容 进行分割 将分割的单元作为数组的数据单元存储 

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 字符串<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        没有设定参数 整个字符串作为一个整体 存储到 数组中
        也就是 数组中 只会存储一个数据单元 是 整个的字符串

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 字符串<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39;间隔符号&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果设定间隔符号 以 设定的间隔符号 分割数组
        分割结果中 没有 间隔符号

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 字符串<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&#39;&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果设定间隔符号 是 空字符串 
        以 每一个字符串 作为 一个单元 转化为数组

<span class="token literal-property property">数组的查询操作</span><span class="token operator">:</span>

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>数据<span class="token punctuation">)</span><span class="token punctuation">;</span>
        查询 指定 数据 在 数组中第一次出现的位置
        如果有匹配的数据 返回值 是第一次出现位置的 索引下标
        如果没有匹配的数据 返回值 是 <span class="token operator">-</span><span class="token number">1</span> 

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span>数据<span class="token punctuation">)</span><span class="token punctuation">;</span>
        查询 指定 数据 在 数组中最后一次出现的位置
        如果有匹配的数据 返回值 是最后一次出现位置的 索引下标
        如果没有匹配的数据 返回值 是 <span class="token operator">-</span><span class="token number">1</span> 

<span class="token literal-property property">数组的排序</span><span class="token operator">:</span>

    数组<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        按照 首字符 顺序排序
            本质上是按照 <span class="token constant">ASCII</span>码表排序
            所谓的 <span class="token constant">ASCII</span>码 是 一种 编码格式 
            所有的字符 都有对应的 码表数值 

    数组<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> 参数<span class="token number">1</span> <span class="token operator">-</span> 参数<span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
        数值 小 <span class="token operator">--</span><span class="token operator">-</span> 大

    数组<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">return</span> 参数<span class="token number">2</span> <span class="token operator">-</span> 参数<span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
        数值 大 <span class="token operator">--</span><span class="token operator">-</span> 小
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>实际项目中经常经常使用的</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">数组的映射</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 操作 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">1</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">2</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">3</span>   存储原始数组本身

        将 设定的操作结果 通过 <span class="token keyword">return</span> 作为 范围值 生成 一个新的数组
        一般情况下 操作是 针对原始数组单元 存储的数据数值的操作
        也就是 针对 参数<span class="token number">1</span> 的操作

        <span class="token keyword">return</span> 操作 <span class="token punctuation">;</span>
            具体要执行什么操作 根据实际项目需求设定 
            设定的操作 执行结果是什么
            <span class="token keyword">return</span> 的就是什么 
            新数组中存储的就是什么 
            
<span class="token literal-property property">数组的过滤</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 条件 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">1</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">2</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">3</span>   存储原始数组本身

        将 符合条件的数据单元 存储的数据数值 作为 返回值 生成 一个新的数组
        <span class="token operator">!</span> 返回的是所有符合条件的数据

<span class="token literal-property property">数组的复杂数据查询</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 条件 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">1</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">2</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">3</span>   存储原始数组本身

        将 符合条件的数据单元 存储的数据数值 作为 返回值
        <span class="token operator">!</span> 只是 返回的是 第一个符合条件的数据单元 存储的数据数值


    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 条件 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">1</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">2</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">3</span>   存储原始数组本身

        将 符合条件的数据单元 索引下标 作为 返回值
        <span class="token operator">!</span> 只是 返回的是 第一个符合条件的数据单元 索引下标

<span class="token literal-property property">数组的判断</span> <span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 条件 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">1</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">2</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">3</span>   存储原始数组本身

        如果 数组中 有一个 符合条件的数据 返回值 是 <span class="token boolean">true</span> 
        如果 数组中 所有数据都不符合条件 返回值 是 <span class="token boolean">false</span>


    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 条件 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">1</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">2</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">3</span>   存储原始数组本身

        如果 数组中 所有数据都符合条件 返回值 是 <span class="token boolean">true</span>
        如果 数组中 有一个 不符合条件的数据 返回值 是 <span class="token boolean">false</span> 

    
<span class="token literal-property property">数组的叠加</span><span class="token operator">:</span>
    
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span> <span class="token punctuation">,</span>参数<span class="token number">4</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 参数<span class="token number">1</span> 的 叠加 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">2</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">3</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">4</span>   存储原始数组本身

        参数<span class="token number">1</span>   存储叠加结果 
            当前是 没有 设定 初始值 
            默认 获取 数组中第一个单元存储的数据 作为 参数<span class="token number">1</span> 的初始值
            然后从 数组的第二个单元开始循环
            循环次数是 数组<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span>



    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span> <span class="token punctuation">,</span>参数<span class="token number">4</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> 参数<span class="token number">1</span> 的 叠加 <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span> 初始值 <span class="token punctuation">)</span>
        自动循环遍历原始数组的每一个单元
        参数<span class="token number">2</span>   存储原始数组数据单元的 数据数值
        参数<span class="token number">3</span>   存储原始数组数据单元的 索引下标
        参数<span class="token number">4</span>   存储原始数组本身

        参数<span class="token number">1</span>   存储叠加结果 
            当前是 设定 初始值 
            将 初始值 赋值给 参数<span class="token number">1</span> 作为 叠加的初始值 
            从 数组的第一个单元开始循环 
            循环次数是 数组<span class="token punctuation">.</span>length次
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>简单了解:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">数组的反转</span><span class="token operator">:</span>
    数组<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token literal-property property">数组的截取</span><span class="token operator">:</span>
    数组<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        参数<span class="token number">1</span>   截取数组起始位置的索索引下标
            <span class="token number">0</span> 正数  
                起始位置的索引下标

            负数 
                结果是 <span class="token punctuation">[</span><span class="token punctuation">]</span> 空数组

        参数<span class="token number">2</span>   截取数组结束位置的索索引下标
            <span class="token number">0</span> 正数
                结束位置的索引下标

            负数
                从起始位置 截取至 数组倒数第几个单元
                也就是 从 起始位置开始 截取至 字符串末位 少截取的单元个数

            不设定第二个参数 
                截取效果是 从起始位置 截取至 字符串末位

    <span class="token operator">!</span> 不会改变原始数组内容
    <span class="token operator">!</span> 参数<span class="token number">2</span> 设定为 <span class="token number">0</span> 正数 是 截取结束位置的索引下标 
        但是结果不包括 结束位置的数据

<span class="token literal-property property">数组的拼接</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> 数组<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span> 数组<span class="token number">1</span> <span class="token punctuation">,</span> 数组<span class="token number">2</span> <span class="token operator">...</span><span class="token punctuation">.</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        将 设定的 一个或者多个数组单元的数据 拼接到 一个数组中
        不会改变原始数组内容 执行结果返回值 是 拼接内容后的新数组

</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>数组的循环语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">for</span>
    执行效率是最高
    本质上没有针对数组进行循环 
    只是 通过 <span class="token keyword">for</span>循环生成 数组中的索引下标 
    通过 索引下标 操作对应的数组单元 

    可以通过 控制循环变量 i 的数值 控制 循环的进程 
    也就是 控制 操作的 数组单元

    可以通过 <span class="token keyword">break</span> 终止循环


<span class="token keyword">for</span><span class="token operator">...</span><span class="token keyword">in</span>
    一般是针对 对象 的循环

    如果 数组中 有 字符串索引下标的数组单元 
    <span class="token keyword">for</span><span class="token operator">...</span><span class="token keyword">in</span> 可以 循环获取数据

    针对数组本身的循环遍历语法
    JavaScript自动从数组的第一个单元 循环至 最后一个单元
    每次获取 当前循环单元 的 索引下标 以字符串形式 存储到变量中

    循环进程 一定是 按照顺序一个一个的循环数组的每一个单元 
    不能 控制 循环的进程

    可以通过 <span class="token keyword">break</span> 终止循环


<span class="token keyword">for</span><span class="token operator">...</span><span class="token keyword">of</span>
    一般用于 数组的迭代操作

    针对数组本身的循环遍历语法
    JavaScript自动从数组的第一个单元 循环至 最后一个单元
    每次获取 当前循环单元 的 数据数值 存储到变量中

    循环进程 一定是 按照顺序一个一个的循环数组的每一个单元 
    不能 控制 循环的进程

    可以通过 <span class="token keyword">break</span> 终止循环


forEach
    执行效率最低的循环语法

    同时指针操作 循环遍历数组的每一个单元

    从数组的起始位置开始 判断 指针指向的是不是在数组范围内 有没有对应的数组单元
        如果有 获取 数组单元的 数据数值 索引下标 原始数组
        执行 设定的循环程序 
        将 指针向右 移动到下一个位置 

    再 继续判断 判断 指针指向的是不是在数组范围内 有没有对应的数组单元
    执行对应程序 

    直到 指针移动到 数组范围之外 终止循环

    循环进程 一定是 按照顺序一个一个的循环数组的每一个单元 
    不能 控制 循环的进程

    不能 通过 <span class="token keyword">break</span> 终止循环
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>数组坍塌:</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">概念</span><span class="token operator">:</span>
    执行数组单元删除操作时 
    删除单元之后的单元会向前移动
    出现在删除单元位置上
    造成数组单元长度减少的情况 
    称为数组的坍塌

<span class="token literal-property property">影响</span><span class="token operator">:</span>
    在 循环遍历数组中 
    如果触发了数组删除 会 立即引起数组的坍塌
    如果直接继续执行循环操作
    坍塌过来的数组单元 没有执行 对应的操作
    也就是 坍塌过来的单元 没有执行 应该执行的比较判断等操作

<span class="token literal-property property">消除</span><span class="token operator">:</span>
    在 触发数组单元删除操作时 
    同时触发执行 循环变量<span class="token operator">--</span> 操作

    <span class="token keyword">for</span>循环通过 控制循环变量的数值 控制 循环进程
    执行 循环变量<span class="token operator">--</span> 目的是为了 让 触发循环的单元 再次执行 循环操作
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>根据数组数据动态渲染生成页面:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>实际项目中 页面 都是根据数据库返回的数据动态生成的
后端返回的数据 一般数据格式 都是 数组中存储对象

数组中每一个对象单元 对应的是 一个具体的数据内容
根据 具体的数据内容 动态生成页面中 对应的 标签

<span class="token operator">!</span> 页面中的标签 和 数组中的对象 是 一一对应的关系

<span class="token literal-property property">基本步骤</span><span class="token operator">:</span> 
    <span class="token number">1</span><span class="token punctuation">,</span>  获取一个数组
        实际项目中 是 通过数据交互 后端程序响应的结果
        目前只能 自己定义一个数组 模拟后端响应的数据

    <span class="token number">2</span><span class="token punctuation">,</span>  定义一个变量 存储 存储的字符串内容

    <span class="token number">3</span><span class="token punctuation">,</span>  循环遍历数组
        每一个数组单元 对应生成 标签和标签内容
        标签的内容 是 数组中对象存储的具体数据

    <span class="token number">4</span><span class="token punctuation">,</span>  通过 <span class="token constant">DOM</span> 操作将 字符串内容 写入 对应的标签

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-数组方法" tabindex="-1"><a class="header-anchor" href="#js-数组方法" aria-hidden="true">#</a> JS 数组方法</h2><p><a href="https://juejin.cn/post/6907109642917117965" target="_blank" rel="noopener noreferrer">数组常见方法<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="js-对象" tabindex="-1"><a class="header-anchor" href="#js-对象" aria-hidden="true">#</a> JS 对象</h2><details class="custom-container details"><summary>JS对象 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>存储数据的集合 
下标可以是 字符串类型

以 键值对的形式 存储数据 
    <span class="token literal-property property">属性</span><span class="token operator">:</span>属性值   键名<span class="token operator">:</span>键值    键<span class="token operator">:</span>值    key<span class="token operator">:</span>value
</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>字面量
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">属性</span><span class="token operator">:</span>属性值 <span class="token punctuation">,</span> <span class="token literal-property property">键名</span><span class="token operator">:</span>键值 <span class="token punctuation">,</span> <span class="token literal-property property">键</span><span class="token operator">:</span>值<span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>

构造函数语法
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token literal-property property">属性</span><span class="token operator">:</span>属性值 <span class="token punctuation">,</span> <span class="token literal-property property">键名</span><span class="token operator">:</span>键值 <span class="token punctuation">,</span> <span class="token literal-property property">键</span><span class="token operator">:</span>值<span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>操作:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">取值语法</span><span class="token operator">:</span>
    点语法
        对象<span class="token punctuation">.</span>属性
        
    <span class="token punctuation">[</span><span class="token punctuation">]</span>语法
        对象<span class="token punctuation">[</span><span class="token string">&#39;属性&#39;</span><span class="token punctuation">]</span>

    点语法不支持 数值类型的属性
    点语法不解析 变量作为属性获取属性值

    <span class="token punctuation">[</span><span class="token punctuation">]</span>语法支持  数值类型的属性
    <span class="token punctuation">[</span><span class="token punctuation">]</span>语法可以解析 变量作为属性获取属性值


<span class="token literal-property property">修改操作</span><span class="token operator">:</span>
    对已经存在的属性进行重复数值
    后赋值的数据 会覆盖之前存储的数据

    <span class="token operator">!</span> 对象中 一定不会存储重复的属性
        如果设定的属性 是 已经存在的属性 
        执行的是 对象数据覆盖的效果 
        不是 新增对象单元的效果

<span class="token literal-property property">新增</span><span class="token operator">:</span>
    对 不存在的属性进行赋值操作
    执行效果是 给 对象 新增数据单元 设定 属性 和 属性值

<span class="token literal-property property">删除</span><span class="token operator">:</span>
    <span class="token keyword">delete</span><span class="token punctuation">(</span> 对象<span class="token punctuation">.</span>属性 <span class="token punctuation">)</span>
    <span class="token keyword">delete</span><span class="token punctuation">(</span> 对象<span class="token punctuation">[</span><span class="token string">&#39;属性&#39;</span><span class="token punctuation">]</span> <span class="token punctuation">)</span>

    <span class="token keyword">delete</span> 对象<span class="token punctuation">.</span>属性 
    <span class="token keyword">delete</span> 对象<span class="token punctuation">[</span><span class="token string">&#39;属性&#39;</span><span class="token punctuation">]</span> 
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-字符串" tabindex="-1"><a class="header-anchor" href="#js-字符串" aria-hidden="true">#</a> JS 字符串</h2><details class="custom-container details"><summary>JS字符串 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1.包装数据类型:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>字符串 是 包装数据类型
支持 <span class="token punctuation">[</span><span class="token punctuation">]</span>语法 通过索引下标 获取一个字符串
支持 length 属性 获取字符串长度 也就是 字符个数
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2.字符串循环:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">for</span>循环
    生成 从 第一个字符串 到 最后一个字符的索引下标
    <span class="token number">0</span> 至 字符串<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span>

<span class="token keyword">for</span><span class="token operator">...</span><span class="token keyword">in</span>循环
    变量中存储每一个字符的索引下标 

<span class="token keyword">for</span><span class="token operator">...</span><span class="token keyword">of</span>循环
    变量中存储么一个字符
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3.字符串操作函数:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> 字符串查询类<span class="token operator">:</span>

    字符串<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span> 字符 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果有匹配的字符 返回值 是 这个字符第一次出现位置的索引下标
        如果没有匹配字符 返回值 是 <span class="token operator">-</span><span class="token number">1</span>

    字符串<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span> 字符 <span class="token operator">/</span> 正则 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果有匹配的字符 返回值 是 这个字符第一次出现位置的索引下标
        如果没有匹配字符 返回值 是 <span class="token operator">-</span><span class="token number">1</span>

        查询内容 支持 正则表达式 

    字符串<span class="token punctuation">.</span><span class="token function">lastIndexOf</span><span class="token punctuation">(</span> 字符 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果有匹配的字符 返回值 是 这个字符最后一次出现位置的索引下标
        如果没有匹配字符 返回值 是 <span class="token operator">-</span><span class="token number">1</span>

    字符串<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span> 字符 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果有匹配的字符 返回值 是 <span class="token boolean">true</span>
        如果没有匹配字符 返回值 是 <span class="token boolean">false</span>

    字符串<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span> 字符 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果 是以查询字符起始 返回值 是 <span class="token boolean">true</span>
        如果 不是以查询字符起始 返回值 是 <span class="token boolean">false</span>

    字符串<span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span> 字符 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果 是以查询字符结束 返回值 是 <span class="token boolean">true</span>
        如果 不是以查询字符结束 返回值 是 <span class="token boolean">false</span>

<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> 字符串截取<span class="token operator">:</span>

    字符串<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">)</span>
        参数<span class="token number">1</span>   截取起始的位置   
            <span class="token number">0</span> 正数
                起始位置的索引下标
            负数
                从倒数第几个字开始截取

        参数<span class="token number">2</span>   截取字符的个数
            如果不设定
                截取至字符末位
            <span class="token number">0</span> 正数
                截取字符的个数
            负数
                空字符串

            
    字符串<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">)</span>
        参数<span class="token number">1</span>   截取起始的位置
            <span class="token number">0</span> 正数
                起始位置的索引下标
            负数
                从起始位置开始截取

        参数<span class="token number">2</span>   截取结束的位置
            如果不设定 
                截取至字符串末位
            <span class="token number">0</span> 正数
                结束位置的索引下标
            负数
                从起始位置 向 字符串起始方向截取
                也就是 从 起始位置向 字符串 左侧截取
        
            <span class="token operator">!</span> 截取结果 包括起始字符 不包括 结束字符

    字符串<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">)</span>
        参数<span class="token number">1</span>   截取起始的位置
            <span class="token number">0</span> 正数
                起始位置的索引下标
            负数
                从倒数第几个字符开始截取

        参数<span class="token number">2</span>   截取结束的位置
            如果不设定
                截取至字符串末位

            <span class="token number">0</span> 正数
                结束位置的索引下标

            负数
                从起始位置开始截取至字符串末位
                负数是少截取的字符个数

            <span class="token operator">!</span> 截取结果 包括起始字符 不包括 <span class="token function">结束字符</span>

<span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> 字符串替换<span class="token operator">:</span>
    字符串<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">)</span>
        参数<span class="token number">1</span>   要替换的原始字符
        参数<span class="token number">2</span>   写入的新字符

        默认只会替换第一个符合的内容
        实际项目中 通过 <span class="token function">正则表达式完成</span>

<span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> 字符串大小写<span class="token operator">:</span>

    字符串<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        所有字符小写

    字符串<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token function">所有字符串大写</span>

<span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> 字符串 <span class="token operator">--</span> 数组<span class="token operator">:</span>

    字符串<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


<span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span> 字符串获取字符<span class="token operator">:</span>
    字符串<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span>索引下标<span class="token punctuation">)</span>
        根据指定索引下标获取字符

    字符串<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>索引下标<span class="token punctuation">)</span>
        根据指定索引下标获取字符的<span class="token constant">ASCII</span><span class="token function">码</span>

<span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span> 字符串去除空格<span class="token operator">:</span>

    字符串<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        去除字符串两端的空格

    字符串<span class="token punctuation">.</span><span class="token function">trimStart</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> 字符串<span class="token punctuation">.</span><span class="token function">trimLeft</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        去除字符串左侧的空格

    字符串<span class="token punctuation">.</span><span class="token function">trimEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">/</span> 字符串<span class="token punctuation">.</span><span class="token function">trimRight</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token function">去除字符串右侧的空格</span>

<span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">)</span> 字符串拼接<span class="token operator">:</span>

    字符串<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span> 字符<span class="token number">1</span> <span class="token punctuation">,</span> 字符<span class="token number">2</span> <span class="token operator">...</span> <span class="token punctuation">)</span>
        将 设定的字符内容 拼接到一个字符串中
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-math内置对象" tabindex="-1"><a class="header-anchor" href="#js-math内置对象" aria-hidden="true">#</a> JS Math内置对象</h2><details class="custom-container details"><summary>Math内置对象 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>Math内置对象:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>是 JavaScript 定义好的对象 
其中定好了属性和函数方法 我们直接调用
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>属性属性值:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>Math<span class="token punctuation">.</span><span class="token constant">PI</span>
    圆周率

Math<span class="token punctuation">.</span><span class="token constant">SQRT2</span>
    根号<span class="token number">2</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>函数方法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token number">0</span> <span class="token operator">-</span> <span class="token number">1</span> 的 随机小数 
        可以是 <span class="token number">0</span> 永远不会是 <span class="token number">1</span>

    如果需要 生成 数值<span class="token number">1</span> 至 数值<span class="token number">2</span> 的 随机整数 包括 数值<span class="token number">1</span> 数值<span class="token number">2</span> 
        <span class="token function">parseInt</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span> 数值<span class="token number">2</span> <span class="token operator">+</span> <span class="token number">1</span> <span class="token operator">-</span> 数值<span class="token number">1</span> <span class="token punctuation">)</span> <span class="token operator">+</span> 数值<span class="token number">1</span> <span class="token punctuation">)</span>


    如果需要 获取 数组 <span class="token operator">/</span> 字符串 中 任意一个字符
        生成 所有的索引下标 中 的 随机数值 
        所有索引下标的范围是 <span class="token number">0</span> 至 数组<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span> <span class="token operator">/</span> 字符串<span class="token punctuation">.</span>length<span class="token operator">-</span><span class="token number">1</span>
        套用公式的结果是 <span class="token function">parseInt</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> 数组<span class="token punctuation">.</span>length <span class="token operator">/</span> 字符串<span class="token punctuation">.</span>length <span class="token punctuation">)</span>

Math<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    最小值

Math<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    最大值

Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    四舍五入取整

Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    向下取整 <span class="token operator">--</span><span class="token operator">--</span> 变小

Math<span class="token punctuation">.</span><span class="token function">ceil</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    向上取整 <span class="token operator">--</span><span class="token operator">--</span> 变大

变量<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span> 位数 <span class="token punctuation">)</span>
    按照指定的小数位数 保留小数
    四舍五入保留小数位数

<span class="token function">parseInt</span><span class="token punctuation">(</span> 变量 <span class="token operator">/</span> <span class="token number">100</span> <span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">100</span>
    保留指定的<span class="token number">2</span>位小数

Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span> 底数 <span class="token punctuation">,</span> 指数 <span class="token punctuation">)</span>
    幂运算 <span class="token operator">/</span> 乘方运算

Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    绝对值

Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    求平方根
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-时间对象" tabindex="-1"><a class="header-anchor" href="#js-时间对象" aria-hidden="true">#</a> JS 时间对象</h2><details class="custom-container details"><summary>时间对象 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1.创建时间对象:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    没有设定参数 获取的是 当前时间的时间对象

<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;年 月 日 时:分:秒&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;年-月-日 时:分:秒&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;年,月,日 时:分:秒&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token string">&#39;年/月/日 时:分:秒&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    设定 一个字符串 
    字符串中设定 指定的时间
    设定的时间不能超出正常值范围

<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>年<span class="token punctuation">,</span>月<span class="token punctuation">,</span>日<span class="token punctuation">,</span>时<span class="token punctuation">,</span>分<span class="token punctuation">,</span>秒<span class="token punctuation">)</span><span class="token punctuation">;</span>
    设定 多个数值 作为时间数据
    设定的数值 可以超出 正常值范围 会 自动进位
    <span class="token operator">!</span> 设定的月份数值 是 <span class="token number">0</span><span class="token operator">-</span><span class="token number">11</span> 对应 <span class="token number">1</span><span class="token operator">-</span><span class="token number">12</span> 月
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2.获取时间数据:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>时间对象<span class="token punctuation">.</span>get<span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    获取 当前时区 时间数据

时间对象<span class="token punctuation">.</span>getUTC<span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    获取 世界标准时 时间数据

时间对象<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    获取 <span class="token number">4</span>位 年份

时间对象<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    获取 月份
    获取 结果是 <span class="token number">0</span><span class="token operator">-</span><span class="token number">11</span> 的数字 对应 <span class="token number">1</span><span class="token operator">-</span><span class="token number">12</span> 月 

    如果 需要的结果是 数字结果 
        获取结果 <span class="token operator">+</span><span class="token number">1</span> 是 正确的月份数字

    如果 需要的结果是 文字结果
        设定数组 数组的内容是 <span class="token number">1</span>月 <span class="token operator">-</span> <span class="token number">12</span>月 的 文字内容
        使用 获取结果 作为 数组的索引下标 
        从 数组中 获取 对应的 文字内容

时间对象<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    获取 日期

时间对象<span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    获取 星期 
    获取结果是 <span class="token number">0</span> <span class="token operator">-</span> <span class="token number">6</span> 的数字 对应 星期日 <span class="token operator">-</span> 星期六
    如果 需要的结果是 文字结果
        设定数组 数组的内容是 星期日 <span class="token operator">-</span> 星期六 的 文字内容
        使用 获取结果 作为 数组的索引下标 
        从 数组中 获取 对应的 文字内容

时间对象<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    获取 小时

时间对象<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>
    获取 分钟

时间对象<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">;</span>
    获取 秒
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3.设定时间数据:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>时间对象<span class="token punctuation">.</span>set<span class="token operator">...</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    设定的时间是 当前时区 时间

时间对象<span class="token punctuation">.</span>setUTC<span class="token operator">...</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    设定的时间是 世界标准时 时间


时间对象<span class="token punctuation">.</span><span class="token function">setMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    设定月份
    设定的数值是 <span class="token number">0</span><span class="token operator">-</span><span class="token number">11</span> 对应的是 <span class="token number">1</span><span class="token operator">-</span><span class="token number">12</span> 月

星期不能设定
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>4.时间戳:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>当前时间 距离 格林尼治标准时间<span class="token number">1970</span>年<span class="token number">1</span>月<span class="token number">1</span>日 <span class="token number">0</span>点<span class="token number">0</span>分<span class="token number">0</span>秒 的 时间差
在 JavaScript中 时间戳的单位是 毫秒  
<span class="token number">1</span> 秒 <span class="token operator">=</span> <span class="token number">1000</span> 毫秒


获取 时间戳
    时间对象<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


设定 时间戳
    时间对象<span class="token punctuation">.</span><span class="token function">setTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>


时间戳 一般用于计算时间差
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-定时器-延时器" tabindex="-1"><a class="header-anchor" href="#js-定时器-延时器" aria-hidden="true">#</a> JS 定时器 延时器</h2><details class="custom-container details"><summary>定时器 延时器 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>定时器:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>根据设定的时间间隔 循环往复执行函数程序

如果不清除定时器 定时器会一直触发执行
<span class="token operator">!</span> 定时器的一次调用执行 是在 设定的时间间隔之后
    也就是 第一次的时间间隔内 定时器 是没有触发执行的程序

<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
    参数<span class="token number">1</span>   定时器触发的回调函数
            回调函数可以是 匿名函数 <span class="token operator">/</span> 函数名称
            本质是 函数的内存地址
            通过赋值的函数的内存地址 在 定时器中 触发调用函数程序

    参数<span class="token number">2</span>   时间间隔
            单位 毫秒
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>延时器:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>根据设定的时间间隔 延迟执行函数程序

设定的函数程序只会触发执行一次

<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
    参数<span class="token number">1</span>   定时器触发的回调函数
            回调函数可以是 匿名函数 <span class="token operator">/</span> 函数名称
            本质是 函数的内存地址
            通过赋值的函数的内存地址 在 定时器中 触发调用函数程序

    参数<span class="token number">2</span>   时间间隔
            单位 毫秒
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>清除 定时器/延时器:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> 变量 <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    变量中 存储的是当前定时器延时器的序号编号

<span class="token function">clearInterval</span><span class="token punctuation">(</span> 参数 <span class="token punctuation">)</span>
<span class="token function">clearTimeout</span><span class="token punctuation">(</span> 参数 <span class="token punctuation">)</span>
    设定的参数的是 定时器延时器 序号编号

    定时器 延时器 函数程序 执行结果返回值 就是 这个定时器延时器的序号编号
    可以使用变量储存

    可以 清除 定时器也可以清除延时器
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>异步程序的基本执行原理:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1.</span>单线程 <span class="token operator">/</span> 多线程<span class="token operator">:</span>

    单线程 
        同一个时间内 只能触发执行一个程序
        之后的程序 要等之前的程序执行结束 再触发执行

    多线程
        同一个事件内 可以触发执行多个程序
        每个程序按照设定的线程 执行 

<span class="token number">2.</span>同步程序 <span class="token operator">/</span> 异步程序<span class="token operator">:</span>

    同步程序 和 异步程序 是 单线程中 程序执行的顺序原理

    先触发执行所有的同步程序
        执行方式是 按照 单线程的原理 一个一个的执行

    如果是异步程序 先存储到异步池中
    所有同步成执行结束 同时触发执行 异步池中的所有异步程序
        时间间隔短的先触发执行
        时间间隔长的后触发执行
        如果时间间隔相同 按照顺序执行

    <span class="token literal-property property">异步程序包括</span><span class="token operator">:</span>
        定时器 延时器
        事件绑定
        ajax
        nodejs
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-dom-操作" tabindex="-1"><a class="header-anchor" href="#js-dom-操作" aria-hidden="true">#</a> JS DOM 操作</h2><details class="custom-container details"><summary>DOM 操作 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1.获取标签对象:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">好用的方法</span><span class="token operator">:</span>

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;条件&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        获取第一个符合条件的标签对象
        获取结果是一个独立的标签对象 
            可以直接执行<span class="token constant">DOM</span>操作

        如果没有匹配的标签对象获取结果是 <span class="token keyword">null</span>

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">&#39;条件&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        获取所有符合条件的标签对象
        获取结果是一个伪数组 
            不能直接执行<span class="token constant">DOM</span>操作
            通过 <span class="token punctuation">[</span><span class="token punctuation">]</span>语法 获取 一个独立的标签对象进行<span class="token constant">DOM</span>操作
            通过 循环语法 对 伪数组中每一个标签对象进行操作

        如果没有匹配的标签对象 获取结果是 一个 空数组

    条件可以是所有html和css支持的语法形式
        标签名称
        属性属性值
        伪类选择器
        <span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span>


<span class="token literal-property property">不好用的方法</span><span class="token operator">:</span>
    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&#39;id属性值&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        获取结果是一个独立的标签对象

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span><span class="token string">&#39;class属性值&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        获取结果是一个伪数组
        不能 forEach

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">&#39;标签名称&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        获取结果是一个伪数组
        不能 forEach

    <span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByName</span><span class="token punctuation">(</span><span class="token string">&#39;name属性值&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        获取结果是一个伪数组
        可以 forEach
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2.标签的精确获取方式:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;条件&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    在 整个html文档中获取符合条件标签

<span class="token keyword">var</span> 变量 <span class="token operator">=</span> 标签对象<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;条件&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    在 指定的标签对象中 获取 符合条件的标签
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3.特殊的标签的获取:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>document
    整个<span class="token constant">HTML</span>文档

document<span class="token punctuation">.</span>documentElement
    整个html标签

document<span class="token punctuation">.</span>body
    整个body标签

document<span class="token punctuation">.</span>title
    title标签的内容

    document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">&#39;内容&#39;</span> <span class="token punctuation">;</span>
        设定 title标签内容
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>4.内容操作:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>标签对象<span class="token punctuation">.</span>innerHTML
    支持解析标签

标签对象<span class="token punctuation">.</span>innerText  
    不能解析标签

写入的内容 必须是 字符串类型
如果不是字符串类型会自动转化为字符串类型
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>5.数据的操作:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>标签对象<span class="token punctuation">.</span>value
    input   textarea    select<span class="token operator">&gt;</span>option
    这三个标签可以获取标签数据

通过js操作获取标签的数据 标签中不需要设定name属性

input<span class="token operator">&gt;</span>radio input<span class="token operator">&gt;</span>checkbox等 
    不能 通过输入 给标签设定数据
    只能 通过给标签设定value属性 设定标签的数据

input<span class="token operator">&gt;</span>radio input<span class="token operator">&gt;</span>checkbox
    标签 checked 属性 是 默认选中时 获取标签数据
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>6.属性操作:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">布尔属性</span><span class="token operator">:</span>
    标签对象<span class="token punctuation">.</span>布尔属性

    获取和设定的数据 都是 布尔类型


<span class="token literal-property property">标签直接支持的属性</span><span class="token operator">:</span>
    标签对象<span class="token punctuation">.</span>属性

    每个标签直接支持的属性都不同

    所有标签都直接支持的属性
        标签对象<span class="token punctuation">.</span>id
        标签对象<span class="token punctuation">.</span>className
        标签对象<span class="token punctuation">.</span>title


<span class="token literal-property property">标签属性的通用操作语法</span><span class="token operator">:</span>

    标签对象<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span> <span class="token string">&#39;属性&#39;</span> <span class="token punctuation">,</span> 属性值 <span class="token punctuation">)</span>
        设定标签属性和属性值

    标签对象<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span> <span class="token string">&#39;属性&#39;</span> <span class="token punctuation">)</span>
        获取标签属性和属性值

    标签对象<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span> <span class="token string">&#39;属性&#39;</span> <span class="token punctuation">)</span>
        删除标签属性和属性值

    通用方法 不 操作 布尔类型
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>7.class属性:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>    <span class="token keyword">class</span>属性的属性值 可以是 一个或者多个属性值

    标签对象<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span> 属性值<span class="token number">1</span> <span class="token punctuation">,</span> 属性值<span class="token number">2.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        新增

    标签对象<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span> 属性值<span class="token number">1</span> <span class="token punctuation">,</span> 属性值<span class="token number">2.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        删除

    标签对象<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span> 属性值<span class="token number">1</span> <span class="token punctuation">,</span> 属性值<span class="token number">2.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        切换
            有 <span class="token operator">--</span><span class="token operator">-</span> 删除
            没有 <span class="token operator">--</span><span class="token operator">-</span> 新增

    标签对象<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span> 旧的 <span class="token punctuation">,</span> 新的 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        替换
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>8.标签的占位:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>盒子模型的css属性 决定标签的文档流占位大小

    标签对象<span class="token punctuation">.</span>offsetWidth
    标签对象<span class="token punctuation">.</span>offsetHeight
        内容<span class="token operator">+</span>padding<span class="token operator">+</span>border

    标签对象<span class="token punctuation">.</span>clientWidth
    标签对象<span class="token punctuation">.</span>clientHeight
        内容<span class="token operator">+</span>padding

    标签对象<span class="token punctuation">.</span>clientLeft
    标签对象<span class="token punctuation">.</span>clientTop
        左 上 边框线宽度

    获取的结果是 数值 没有px单位
    如果标签有 display<span class="token operator">:</span>none 获取的占位数值是 <span class="token number">0</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>9.标签的间距:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>和 JavaScript定位父级的间距

标签对象<span class="token punctuation">.</span>offsetParent
    当前标签 JavaScript定位父级

标签对象<span class="token punctuation">.</span>offsetLeft
标签对象<span class="token punctuation">.</span>offsetTop
    和定位父级 左 上 的间距

<span class="token keyword">null</span>
    当前标签有 固定定位
    视窗窗口 左上角 

body
    当前标签有 定位属性
    <span class="token constant">HTML</span>的body标签 也就是 <span class="token constant">HTML</span>页面左上角

标签
    有父级标签 并且 父级标签有定位属性

</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-bom-操作" tabindex="-1"><a class="header-anchor" href="#js-bom-操作" aria-hidden="true">#</a> JS BOM 操作</h2><details class="custom-container details"><summary>BOM 操作 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window是 <span class="token constant">BOM</span> 操作的顶级对象
document 是 <span class="token constant">DOM</span> 操作的顶级对象

JavaScript语法规范规定 
    window 可以 省略不写
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>浏览器三大弹窗:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    警告框

window<span class="token punctuation">.</span><span class="token function">prompt</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    输入框
    输入的数据可以使用变量储存
    输入的数据以字符串类型存储

window<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    确认框
    执行结果可以使用变量储存
    点击 确定 执行结果是 <span class="token boolean">true</span>
    点击 取消 执行结果是 <span class="token boolean">false</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>视窗窗口宽度高度:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>包含 滚动条的宽度高度

    window<span class="token punctuation">.</span>innerWidth
    window<span class="token punctuation">.</span>innerHeight

不包含 滚动条的宽度高度

    有 文档类型声明
        document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientWidth
        document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>clientHeight

    没有 文档类型声明
        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientWidth
        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>clientHeight

浏览器视窗窗口监听事件
    浏览器视窗窗口大小改变时触发

    window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;resize&#39;</span> <span class="token punctuation">,</span> 回调函数 <span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>页面滚动:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>有文档类型声明
    document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollTop
        document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span>scrollLeft

没有 文档类型声明
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollTop
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span>scrollLeft

页面滚动监听事件
    页面滚动时触发

    window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;scroll&#39;</span> <span class="token punctuation">,</span> 回调函数 <span class="token punctuation">)</span>

    <span class="token operator">!</span> 鼠标滚轮滚动一次 页面滚动监听事件 触发多次
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>浏览器配置信息:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span>appName
    Netscape    网景公司 

window<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span>appVersion
    <span class="token number">5.0</span> <span class="token punctuation">(</span>Windows <span class="token constant">NT</span> <span class="token number">10.0</span><span class="token punctuation">;</span> <span class="token constant">WOW64</span><span class="token punctuation">)</span> AppleWebKit<span class="token operator">/</span><span class="token number">537.36</span> <span class="token punctuation">(</span><span class="token constant">KHTML</span><span class="token punctuation">,</span> like Gecko<span class="token punctuation">)</span> Chrome<span class="token operator">/</span><span class="token number">104.0</span><span class="token number">.0</span><span class="token number">.0</span> Safari<span class="token operator">/</span><span class="token number">537.36</span>
        浏览器版本信息

window<span class="token punctuation">.</span>navigator<span class="token punctuation">.</span>userAgent
    Mozilla<span class="token operator">/</span><span class="token number">5.0</span> <span class="token punctuation">(</span>Windows <span class="token constant">NT</span> <span class="token number">10.0</span><span class="token punctuation">;</span> <span class="token constant">WOW64</span><span class="token punctuation">)</span> AppleWebKit<span class="token operator">/</span><span class="token number">537.36</span> <span class="token punctuation">(</span><span class="token constant">KHTML</span><span class="token punctuation">,</span> like Gecko<span class="token punctuation">)</span> Chrome<span class="token operator">/</span><span class="token number">104.0</span><span class="token number">.0</span><span class="token number">.0</span> Safari<span class="token operator">/</span><span class="token number">537.36</span>&quot;
        浏览器版本信息
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>浏览器历史记录:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window<span class="token punctuation">.</span>history<span class="token punctuation">.</span>length
    当前窗口浏览的页面个数

window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    按照设定的方向和次数 跳转显示的页面

    正数
        向前跳转
    
    负数
        向后跳转

window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    返回上一个浏览的页面
    window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> 的效果相同

window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    返回下一个浏览的页面
    window<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> 的效果相同
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>浏览器地址栏数据信息:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window<span class="token punctuation">.</span>location的配置信息<span class="token operator">:</span>
    <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&quot;127.0.0.1&quot;</span>
        服务器主机 域名 <span class="token operator">/</span> <span class="token constant">IP</span>地址
        当前是本地服务器 <span class="token constant">IP</span>地址是 <span class="token number">127.0</span><span class="token number">.0</span><span class="token number">.1</span>

    <span class="token literal-property property">hostname</span><span class="token operator">:</span> <span class="token string">&quot;127.0.0.1&quot;</span>
        服务器主机 名称

    <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token string">&quot;http://127.0.0.1/demo.html&quot;</span>
        当前文件 url地址 
        一个完整的url地址 包括 协议 路径 端口 三个部分

    <span class="token literal-property property">origin</span><span class="token operator">:</span> <span class="token string">&quot;http://127.0.0.1&quot;</span>
        当前服务器 根目录 路径地址

    <span class="token literal-property property">pathname</span><span class="token operator">:</span> <span class="token string">&quot;/demo.html&quot;</span>
        当前文件 在 根目录 中的 路径地址

    <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span>
        端口号

window<span class="token punctuation">.</span>location的常用函数方法<span class="token operator">:</span>

    window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">&#39;url地址&#39;</span> <span class="token punctuation">;</span>
        设定 当前页面 跳转的url路径地址
        可以 触发 后退操作

    window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">&#39;url地址&#39;</span><span class="token punctuation">)</span>
        使用 设定的url地址 替换 当前的url地址
        执行 效果 和 页面跳转效果相同
        不能 触发 后退操作


    window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">&#39;url地址&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        新窗口 打开 url地址

    window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        刷新当前页面

    window<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        关闭当前窗口
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>前端传参方式:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>所谓的传参 本质是 向指定的url地址发送请求同时携带需要的数据参数

方式<span class="token number">1</span><span class="token operator">:</span>   通过html标签完成
    <span class="token literal-property property">form</span><span class="token operator">:</span>
        action  发送请求的url地址
        method  发送请求的方式
                    <span class="token keyword">get</span>     显性传参 <span class="token operator">/</span> 明文传参 
                            携带的参数会显示在浏览器地址栏中
                    post
                            隐性传参 <span class="token operator">/</span> 密文传参
                            携带的参数不会显示在浏览器地址栏中
                            会 通过 请求体 携带参数

        enctype 上传文件时必须设定的属性


        其他传参标签的设定 
            input   textarea    select<span class="token operator">&gt;</span>option

            name属性    存储数据的容器
                如果通过form标签 
                直接向 后端程序文档 发送请求 
                    也就是 action 中 发送请求的地址是一个 后端程序 例如 <span class="token constant">PHP</span> java<span class="token operator">...</span><span class="token punctuation">.</span>
                如果 多个标签 键名相同 键值不同 需要给标签name属性添加<span class="token punctuation">[</span><span class="token punctuation">]</span>

                    王者荣耀<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;checkbox&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;hobby[]&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;王者荣耀&quot;</span><span class="token operator">&gt;</span>
                    英雄联盟<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;checkbox&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;hobby[]&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;英雄联盟&quot;</span><span class="token operator">&gt;</span>
                    绝地求生<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;checkbox&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;hobby[]&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;绝地求生&quot;</span><span class="token operator">&gt;</span>
                    和平精英<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">&quot;checkbox&quot;</span> name<span class="token operator">=</span><span class="token string">&quot;hobby[]&quot;</span> value<span class="token operator">=</span><span class="token string">&quot;和平精英&quot;</span><span class="token operator">&gt;</span>
                        input标签 name 属性之后 添加 <span class="token punctuation">[</span><span class="token punctuation">]</span>
                        后端程序 会 自动以 数组的形式 存储 相同键名 不同键值的数据

                如果是向 html文件发送请求不需要


            value属性   设定标签存储的数据


    <span class="token literal-property property">a</span><span class="token operator">:</span>
        通过固定的语法形式 以 <span class="token keyword">get</span> 方式传参

        在 超链接标签 href属性中 以键值对形式携带参数
        携带参数和url地址之间 使用 <span class="token operator">?</span> 问号间隔
        键值对之间 使用 <span class="token operator">&amp;</span> 符号间隔

        <span class="token operator">&lt;</span>a href<span class="token operator">=</span><span class="token string">&quot;url地址?键名=键值&amp;键名=键值...&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>


方式<span class="token number">2</span><span class="token operator">:</span>   window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href
    以固定的语法形式 使用 <span class="token keyword">get</span> 方式 发送请求 同时携带参数

    携带参数和url地址之间 使用 <span class="token operator">?</span> 问号间隔
    键值对之间 使用 <span class="token operator">&amp;</span> 符号间隔

    window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">&quot;url地址?键名=键值&amp;键名=键值...&quot;</span> <span class="token punctuation">;</span>


方式<span class="token number">3</span>   ajax
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-节点-操作" tabindex="-1"><a class="header-anchor" href="#js-节点-操作" aria-hidden="true">#</a> JS 节点 操作</h2><details class="custom-container details"><summary>节点 操作 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><blockquote><p>页面中的所有内容都可以视为节点<br> 通过获取节点操作html页面中的内容</p></blockquote><p><strong>获取节点:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>标签对象<span class="token punctuation">.</span>childNodes
    获取所有节点

标签对象<span class="token punctuation">.</span>children
    获取所有标签节点

标签对象<span class="token punctuation">.</span>firstChild
    获取第一个节点

标签对象<span class="token punctuation">.</span>lastChild
    获取最后一个节点

标签对象<span class="token punctuation">.</span>firstElementChild
    获取第一个标签节点

标签对象<span class="token punctuation">.</span>lastElementChild
    获取最后一个标签节点

标签对象<span class="token punctuation">.</span>previousSibling
    获取上一个节点

标签对象<span class="token punctuation">.</span>nextSibling
    获取下一个节点

标签对象<span class="token punctuation">.</span>previousElementSibling
    获取上一个标签节点

标签对象<span class="token punctuation">.</span>nextElementSibling
    获取下一个标签节点

标签对象<span class="token punctuation">.</span>parentNode
    获取父级节点

标签对象<span class="token punctuation">.</span>attributes
    获取属性节点
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>创建节点:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&#39;标签名称&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    创建的是 一个 标签对象
    是 一个 空标签对象
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>设定节点:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>可以 通过 所有JavaScript支持的 <span class="token constant">DOM</span>操作方式 
设定节点的 内容 样式 属性<span class="token operator">...</span><span class="token punctuation">.</span>
可以给 创建的标签节点 直接 绑定事件
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>写入节点:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>创建的是 标签对象 不能 使用 <span class="token constant">DOM</span>操作 写入创建的节点
    也就是 不能使用 标签对象<span class="token punctuation">.</span>innerHTML 语法写入

必须使用 节点操作方式 写入 创建的标签对象
    标签对象<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span> 新节点 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        在 标签对象 末位 写入新节点

    标签对象<span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span> 新节点 <span class="token punctuation">,</span> 指定节点 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        在 标签对象中 指定节点 之前 写入 新节点
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>克隆节点:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">var</span> 变量 <span class="token operator">=</span> 标签对象<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    只克隆标签本身 不会克隆标签内容

<span class="token keyword">var</span> 变量 <span class="token operator">=</span> 标签对象<span class="token punctuation">.</span><span class="token function">cloneNode</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    标签本身 和 标签内容 都会 克隆

不会克隆 标签绑定的事件
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>替换节点:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>标签对象<span class="token punctuation">.</span><span class="token function">replaceChild</span><span class="token punctuation">(</span> 新节点 <span class="token punctuation">,</span> 旧节点 <span class="token punctuation">)</span><span class="token punctuation">;</span>
    将 标签对象中 指定节点替换为新节点
    新节点 必须是 标签对象形式 不能是 字符串形式
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>删除节点:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>标签对象<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    删除这个节点本身

标签对象<span class="token punctuation">.</span><span class="token function">removeChild</span><span class="token punctuation">(</span> 节点 <span class="token punctuation">)</span>
    删除标签对象中指定的节点
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-常见事件类型" tabindex="-1"><a class="header-anchor" href="#js-常见事件类型" aria-hidden="true">#</a> JS 常见事件类型</h2><details class="custom-container details"><summary>事件类型 <span class="badge tip" style=""><!--[-->常见<!--]--></span></summary><p><strong>鼠标事件:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>click           左键单击
dblclick        左键双击

contextmenu     右键单击
    默认会弹出 右键菜单栏
    可以通过 阻止默认事件 阻止弹出

mousedown       按键按下
mouseup         按键抬起
    鼠标按键按下一次 抬起一次 完成 一个完成的鼠标点击操作
    鼠标按键一直按下 只会触发一次 鼠标按下事件

mousemove       鼠标移动
    在 绑定事件的标签对象 也就是 事件源 范围内 移动 触发事件
    一直移动一直触发事件

mouseover       鼠标移入
mouseout        鼠标移出
    事件源 和 事件源的后代标签 都会触发事件

    经过 标签的边界线时 会 触发一次

mouseenter      鼠标移入
mouseleave      鼠标移出
    只有 事件源标签 可以触发事件  
    
    经过 标签的边界线时 会 触发一次
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>键盘事件:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>keydown     键盘按键按下
    所有的按键都会触发事件
    键盘按键按下会一直触发

keyup       键盘按键抬起

keypress    键盘按键按下
    有些特殊的按键不会触发

键盘事件不是所有的标签都支持
    可以支持直接绑定事件的标签 
        input   select<span class="token operator">&gt;</span>option   textarea    button  a

    一般是 直接给 整个文档绑定事件
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>表单事件:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>focus       获取焦点
    不是所有标签都支持直接绑定 获取焦点事件 
    可以支持直接绑定事件的标签 
        input   select<span class="token operator">&gt;</span>option   textarea    button  a

blur        失去焦点
    只要失去焦点就会触发

change      失去焦点并且输入数据改变
    失去焦点 同时 数据和获取焦点时输入的数据不同

input       输入数据事件
    在 标签中输入数据时触发
    如果 按键没有插入数据 不会触发事件


submit      表单提交事件
    给 form标签 绑定的事件
    form标签 提交时 触发事件
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>触摸事件:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>touchstart      触摸开始
touchend        触摸结束
touchmove       触摸移动
<span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span>

只有移动端设备支持事件
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>特殊事件:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>transitionstart     过渡开始
transitionend       过渡结束


animationstart      动画开始
animationend        动画结束

    每一个属性的 过渡<span class="token operator">/</span>动画 都会触发事件
    实际项目中 使用 js完成动画<span class="token operator">/</span>过渡效果
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>事件对象:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>在 事件处理函数中 设定的形参
这个形参 一帮定义的名称是 
    event 或者 e 
当 触发事件时 JavaScript程序 会自动向形参存储实参

实参是 触发事件的相关数据

    事件对象<span class="token punctuation">.</span>target
        触发事件的标签对象
        触发事件的标签对象 和 事件源标签对象 
            有可能相同 有可能不同

    事件对象<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName
        触发事件的标签对象的标签名称
        是 大写的英文字符
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>默认事件和阻止默认事件:</strong></p><blockquote><p>常见的默认事件</p></blockquote><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>a标签 
    a标签 点击 默认事件是 跳转页面

    给 a标签 绑定 click点击事件 
        触发点击事件时 阻止默认事件执行

form标签
    from标签 点击 button提交 默认事件是 跳转页面

    给 form标签 绑定 submit提交事件
        触发 提交时 阻止默认事件


鼠标右键
    鼠标点击右键 触发 弹出 右键菜单栏

    给 整个文档 绑定 鼠标右键事件
        触发 鼠标右键时 阻止默认事件

语法形式
    事件对象<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>事件的传播和阻止事件的传播:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>当前标签 和 父级标签绑定相同类型的事件
当前标签 触发 父级标签也会触发这个事件

<span class="token literal-property property">传播方式</span><span class="token operator">:</span>
    <span class="token literal-property property">冒泡传播</span><span class="token operator">:</span>
        当前所有浏览器默认的事件传播方式

        先触发执行 当前标签的事件
        再触发执行 父级标签的事件
        传播顺序是 当前标签 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 父级标签

    <span class="token literal-property property">捕获传播</span><span class="token operator">:</span>
        现在没有浏览器执行了 

        先触发执行 父级标签的事件
        再触发执行 当前标签的事件
        传播顺序是 父级标签 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 当前标签

        需要给 事件监听语法 第三个参数 设定为 <span class="token boolean">true</span>

<span class="token literal-property property">阻止传播</span><span class="token operator">:</span>
    事件对象<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>事件委托:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>不是给标签直接绑定事件
通过 给 父级标签绑定事件
然后 使用 事件对象<span class="token punctuation">.</span>target 判断 触发事件的标签对象
触发事件的标签对象不同 触发执行不同的程序代码

动态生成的标签 一般都需要使用 事件委托的语法形式 绑定事件

<span class="token literal-property property">事件委托和不同的事件绑定对比</span><span class="token operator">:</span>
    <span class="token number">1.</span>  普通绑定事件 给 所有的标签都绑定事件
        事件委托 给 一直存在的一个父级标签绑定事件

    <span class="token number">2.</span>  普通绑定事件 需要通过 循环遍历操作 给 所有标签都绑定
        事件委托 只需要给一个标签绑定事件 不需要循环遍历

    <span class="token number">3.</span>  普通绑定事件 如果页面再次动态生成 需要再次绑定事件
        事件委托 父级标签一直存在 页面再次动态生成 不影响绑定的事件

    <span class="token number">4.</span>  普通绑定事件 通过循环遍历绑定事件 标签一般不需要定义特殊的属性
        事件委托 需要在动态生成标签时 定义 属性 区分触发事件的标签 存储特殊的数据信息
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>JavaScript事件绑定语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>on语法 
    标签对象<span class="token punctuation">.</span>on事件类型 <span class="token operator">=</span> 回调函数 <span class="token punctuation">;</span>

事件监听语法 
    标签对象<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span> <span class="token string">&#39;事件类型&#39;</span> <span class="token punctuation">,</span> 回调函数 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token operator">!</span> 当前项目开发中推荐使用的语法形式

<span class="token operator">!</span> on语法 本质是 赋值操作 
    后赋值绑定的 函数程序 会 覆盖之前绑定的函数程序
    效果是 一个标签 相同的事件类型 只能 绑定触发 一个函数程序

<span class="token operator">!</span> 事件监听语法 绑定执行函数的原理 和 on语法 完全不同
    效果是 一个标签 相同的事件类型 可以 同时绑定触发 多个函数程序
</code></pre><div class="highlight-lines"><br><br><br><br><br><div class="highlight-line"> </div><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>JavaScript事件删除语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>on语法
    一般是 赋值 <span class="token keyword">null</span> 或者 空函数
    就会覆盖之前赋值绑定的函数
    执行效果就是 没有执行的函数程序 
    达到删除事件的效果

事件监听语法
    标签对象<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span> 事件类型 <span class="token punctuation">,</span> 回调函数 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token operator">!</span> 事件监听语法 绑定的函数程序 如果需要删除 
            只能删除 绑定的是 函数名称的回调函数
            如果绑定的是 匿名函数 不能 删除

    原理
        <span class="token number">1.</span>  回调函数 本质是 赋值的函数的内存地址
            本质是 将 匿名函数的内存地址 或者 函数名称中 存储的内存地址 
            赋值给 事件监听语法 
            事件监听语法 触发事件时 通过 赋值的内存地址 找到对应的函数程序 调用执行
            00ff11 00ffaa 00ff15

        <span class="token number">2.</span>  删除绑定的函数程序 是 通过 删除程序中 赋值的 内存地址 
            找到 绑定的 函数程序的内存地址 
            删除 和 赋值要删除的内存地址相同的 绑定的内存地址 
            00ffaa

        <span class="token number">3.</span>  同一个变量中存储的内存地址是相同的内存地址
            也就是绑定时 和 删除时 执行的是相同的内存地址

            两个匿名函数 即使程序代码完全相同
            也是 两个 独立的 引用数据类型 
            会 使用 两个不同的内存地址 存储 两个匿名函数程序

            绑定的 和 删除的 内存地址 是 不同的 内存地址
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-es6语法" tabindex="-1"><a class="header-anchor" href="#js-es6语法" aria-hidden="true">#</a> JS ES6语法</h2><details class="custom-container details"><summary>ES6语法 <span class="badge tip" style=""><!--[-->常见<!--]--></span></summary><p><strong>1.模板字符串:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>支持换行 支持解析变量的字符串语法
<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>变量<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token template-punctuation string">`</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2.let/const关键词定义变量:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">let</span><span class="token operator">:</span> 
    用于 定义 基本数据类型
    定义的变量 不会 预解析
    定义的变量 变量名称不能重复
    如果定义在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 中 作用域 就是 在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 中
        在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 中 可以调用 
        在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 外 不能直接调用
    在 循环中 定义 循环变量
        每次循环都是一个独立的作用域
        生成一个独立的循环变量
        存储独立的当前循环的循环变量数值

<span class="token keyword">const</span><span class="token operator">:</span>
    用于 定义 引用数据类型
    定义的变量 不会 预解析
    定义的变量 变量名称不能重复
    如果定义在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 中 作用域 就是 在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 中
        在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 中 可以调用 
        在 <span class="token punctuation">{</span> <span class="token punctuation">}</span> 外 不能直接调用
    <span class="token keyword">const</span> 定义的变量 不能重复赋值
    不能用于定义循环变量
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3.解构赋值:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>将 数组<span class="token operator">/</span>对象 中 存储的数据 赋值给 变量储存

数组的解构赋值 
    <span class="token keyword">let</span> <span class="token punctuation">[</span> 变量 <span class="token punctuation">,</span> 变量<span class="token operator">...</span> <span class="token punctuation">]</span> <span class="token operator">=</span> 数组 <span class="token punctuation">;</span>
        一维数组解构赋值

    <span class="token keyword">let</span> <span class="token punctuation">[</span> 变量 <span class="token punctuation">,</span> <span class="token punctuation">[</span>变量<span class="token operator">...</span><span class="token punctuation">]</span> <span class="token punctuation">]</span> <span class="token operator">=</span> 数组 <span class="token punctuation">;</span>
        多维数组解构赋值

对象的解构赋值
    <span class="token keyword">let</span> <span class="token punctuation">{</span> 属性 <span class="token punctuation">,</span> <span class="token literal-property property">属性</span><span class="token operator">:</span>变量<span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token operator">=</span> 对象 <span class="token punctuation">;</span>
        一维对象

    <span class="token keyword">let</span> <span class="token punctuation">{</span> 属性 <span class="token punctuation">,</span> <span class="token literal-property property">属性</span><span class="token operator">:</span><span class="token punctuation">{</span> 属性 <span class="token punctuation">,</span> <span class="token literal-property property">属性</span><span class="token operator">:</span>变量 <span class="token punctuation">}</span> <span class="token operator">...</span> <span class="token punctuation">}</span> <span class="token operator">=</span> 对象 <span class="token punctuation">;</span>
        多维对象
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>4.展开合并运算符:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>展开运算符
    在 调用函数赋值实参时 将 数组展开 
    数组中的每一个单元存储的数据按照顺序一一对应的赋值给形参

    <span class="token function">函数调用</span><span class="token punctuation">(</span><span class="token operator">...</span>数组<span class="token punctuation">)</span><span class="token punctuation">;</span>

合并运算符
    在 定义函数形参时 将 对应的实参 
    以 数组的形式 存储

    <span class="token keyword">function</span> <span class="token function">函数名称</span><span class="token punctuation">(</span> <span class="token parameter">形参 <span class="token punctuation">,</span> 形参 <span class="token punctuation">,</span> <span class="token operator">...</span>形参</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>  <span class="token punctuation">}</span>

    <span class="token function">调用函数</span><span class="token punctuation">(</span> 实参 <span class="token punctuation">,</span> 实参 <span class="token punctuation">,</span>  实参 <span class="token punctuation">,</span> 实参 <span class="token punctuation">,</span>  实参 <span class="token punctuation">,</span> 实参<span class="token operator">...</span><span class="token punctuation">.</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        从 第三个实参开始 剩余的所有实参 
        都已 数组的形式存储到 展开运算符 定义的第三个形参中

arguments
    是 每一个函数 天生就有的属性
    以 伪数组的形式存储所有实参
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><details class="custom-container details"><summary>ES6结构图 <span class="badge tip" style=""><!--[-->详解<!--]--></span></summary><p><img src="/blogs/assets/es6-bc2f05eb.jpg" alt="双向数据绑定原理"></p></details><details class="custom-container details"><summary>ES5 ES6构造函数 对比 <span class="badge tip" style=""><!--[-->详解<!--]--></span></summary><p><img src="/blogs/assets/ES5ES6构造函数对比-cde51bfb.png" alt="ES5 ES6构造函数 对比"></p></details><p><a href="https://www.runoob.com/w3cnote/es6-tutorial.html" target="_blank" rel="noopener noreferrer">ES6 参考文档<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><h2 id="js-es6-map-与-set" tabindex="-1"><a class="header-anchor" href="#js-es6-map-与-set" aria-hidden="true">#</a> JS ES6 Map 与 Set</h2><details class="custom-container details"><summary>ES6 Map 与 Set <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>Map数据类型:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>是 <span class="token constant">ES6</span> 新增的数据类型
类似于 对象形式 存储数据

<span class="token literal-property property">创建</span><span class="token operator">:</span>
    <span class="token keyword">const</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Map</span><span class="token punctuation">(</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> 键名 <span class="token punctuation">,</span> 键值 <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> 键名 <span class="token punctuation">,</span> 键值 <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> 键名 <span class="token punctuation">,</span> 键值 <span class="token punctuation">]</span> <span class="token operator">...</span><span class="token punctuation">.</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        以 二维数组的形式定义 Map数据类型存储的数据数值
        二维数组中 第一个单元 存储 键名 
        二维数组中 第二个单元 存储 键值

<span class="token literal-property property">新增</span><span class="token operator">:</span>
    Map对象<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span> <span class="token string">&#39;键名&#39;</span> <span class="token punctuation">,</span> 键值 <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">获取</span><span class="token operator">:</span>
    Map对象<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">&#39;键名&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">删除</span><span class="token operator">:</span>
    Map对象<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span> <span class="token string">&#39;键名&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">清空</span><span class="token operator">:</span>
    Map对象<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">判断有没有</span><span class="token operator">:</span>
    Map对象<span class="token punctuation">.</span><span class="token function">has</span><span class="token punctuation">(</span> <span class="token string">&#39;键名&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">循环</span><span class="token operator">:</span>
    Map对象<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
        参数<span class="token number">1</span>   键值
        参数<span class="token number">2</span>   键名
        参数<span class="token number">3</span>   原始Map
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Set数据类型:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>是 <span class="token constant">ES6</span> 新增的数据类型
类似于 数组形式 存储数据 
不会存储重复的数据

<span class="token literal-property property">创建</span><span class="token operator">:</span>
    <span class="token keyword">const</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span> 数组 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        以 数组的形式 赋值 Set数据类型要存储的数据

<span class="token literal-property property">新增</span><span class="token operator">:</span>
    Set对象<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span> 数据 <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">删除</span><span class="token operator">:</span>
    Set对象<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span> 数据 <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">清空</span><span class="token operator">:</span>
    Set对象<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span> 数据 <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">循环</span><span class="token operator">:</span>
    Set对象<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
        参数<span class="token number">1</span>   数据数值
        参数<span class="token number">2</span>   数据数值
        参数<span class="token number">3</span>   原始<span class="token keyword">set</span>

一般会将 Set数据类型转化为数组
使用 展开运算符 将 Set类型的数据 作为数值单元的数据存储

    <span class="token keyword">const</span> 变量 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span>Set对象 <span class="token punctuation">]</span> <span class="token punctuation">;</span>

可以使用Set数据类型执行 数组去重操作
    <span class="token keyword">const</span> 新数组 <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span> 原始数组 <span class="token punctuation">)</span> <span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-es6-箭头函数" tabindex="-1"><a class="header-anchor" href="#js-es6-箭头函数" aria-hidden="true">#</a> JS ES6 箭头函数</h2><details class="custom-container details"><summary>ES6 箭头函数 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>是 <span class="token constant">ES6</span> 新增的语法形式 
为了 配合 面向对象编程 定义的

语法形式
    使用 <span class="token function">箭头函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> 替换 匿名函数<span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>

简写语法形式
    如果 <span class="token function">只有一个参数</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> 可以不写

    如果 只有一行代码 <span class="token punctuation">{</span><span class="token punctuation">}</span> 可以不写
</code></pre><div class="highlight-lines"><br><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-this指向" tabindex="-1"><a class="header-anchor" href="#js-this指向" aria-hidden="true">#</a> JS this指向</h2><details class="custom-container details"><summary>this指向 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>每一个函数天生就有的 属性
触发执行函数是 JavaScript程序 给 <span class="token keyword">this</span>设定 指针指向
<span class="token keyword">this</span>指向谁 在函数中 就可以 通过 <span class="token keyword">this</span> 操作谁
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>普通函数:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>window
    赋值式函数 声明式函数
    定时器 延时器
    forEach循环 <span class="token operator">...</span><span class="token punctuation">.</span>

事件源
    事件绑定中 事件处理函数
        事件处理函数中 不管是什么标签触发的事件 
        <span class="token keyword">this</span>指向永远是 事件源

数组<span class="token operator">/</span>对象
    存储在 数组<span class="token operator">/</span>对象 中的函数 
    <span class="token keyword">this</span>指向是存储这个函数的 数组<span class="token operator">/</span>对象
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>箭头函数:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">this</span>指向 不能改变 
是 父级程序的<span class="token keyword">this</span>指向
如果 父级程序没有<span class="token keyword">this</span>指向 或者 没有赋值程序
箭头函数的<span class="token keyword">this</span>指向是window
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>改变this指向:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>在函数执行时 改变<span class="token keyword">this</span><span class="token literal-property property">指向</span><span class="token operator">:</span>
    <span class="token function">函数</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span> 新<span class="token keyword">this</span>指向 <span class="token punctuation">,</span> 实参<span class="token number">1</span> <span class="token punctuation">,</span> 实参<span class="token number">2.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        第一个实参是 新<span class="token keyword">this</span>指向
        其他实参是 原始函数执行需要的实参

    <span class="token function">函数</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span> 新<span class="token keyword">this</span>指向 <span class="token punctuation">,</span> <span class="token punctuation">[</span> 实参<span class="token number">1</span> <span class="token punctuation">,</span> 实参<span class="token number">2.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        第一个实参是 新<span class="token keyword">this</span>指向
        第二个实参是 数组形式 定义的是原始函数执行需要的实参

    call 和 apply 执行效果完全相同
    只是 给 原始函数赋值实参的语法形式不同

在函数封装时 改变<span class="token keyword">this</span><span class="token literal-property property">指向</span><span class="token operator">:</span>
    <span class="token keyword">const</span> 新函数名称 <span class="token operator">=</span> <span class="token function">函数</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span> 新<span class="token keyword">this</span>指向 <span class="token punctuation">)</span><span class="token punctuation">;</span>
        创建一个新函数 将 内存地址赋值给 变量储存
        如果只设定 新<span class="token keyword">this</span>指向 调用函数时 需要赋值 实参

    
    <span class="token keyword">const</span> 新函数名称 <span class="token operator">=</span> <span class="token function">函数</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span> 新<span class="token keyword">this</span>指向 <span class="token punctuation">,</span> 实参<span class="token number">1</span> <span class="token punctuation">,</span> 实参<span class="token number">2.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        如果封装新函数时 绑定了实参
        调用函数时 只会按照绑定的实参 执行程序
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>构造函数中改变this指向:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>在 构造函数中 因为 和 <span class="token keyword">new</span> 关键词一起调用
构造函数中 <span class="token keyword">this</span>指向 都是 实例化对象

在 构造函数中 操作调用的 都是 实例化对象中 属性存储的数据
<span class="token keyword">this</span>指向 是 实例化对象 
<span class="token keyword">this</span><span class="token punctuation">.</span>属性 才能 从 实例化对象中调用数据
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>改变this指向的方法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">第一类在某个独立的函数中</span><span class="token operator">:</span>

    方法<span class="token number">1</span>   匿名函数 修为 箭头函数

    方法<span class="token number">2</span>   定义变量 提前存储<span class="token keyword">this</span>指向

    在 构造函数的函数方法中 <span class="token keyword">this</span>指向是 实例化对象
    在 独立的函数中 <span class="token keyword">this</span>指向 不是 实例化对象

<span class="token literal-property property">第二类回调函数</span><span class="token operator">:</span>

    以 回调函数的语法形式 执行 构造函数中的函数方法

    整个 函数方法 <span class="token keyword">this</span>指向 都是 <span class="token keyword">undefined</span>

    方法<span class="token number">3</span>   赋值 回调函数时 使用 bind语法 绑定<span class="token keyword">this</span>指向
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-面向对象编程" tabindex="-1"><a class="header-anchor" href="#js-面向对象编程" aria-hidden="true">#</a> JS 面向对象编程</h2><details class="custom-container details"><summary>面向对象编程 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1. 概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>通过对于具有相同属性和函数方法的一类事物的描述 实现代码功能
对于具有相同属性和函数方法的抽象类的描述 实现代码功能

理解
    <span class="token operator">!</span>   定义一个对象 

        利用对象的属性存储的数据
            将 程序执行需要的数据都以属性的形式
            存储在对象中

        利用函数方法存储程序代码
            将 执行程序需要的代码 
            以 函数方法的形式存储 
            调用执行函数方法时 
            使用的数据是 对象属性中存储的数据
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 语法形式:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token function-variable function">工厂模式</span><span class="token operator">:</span>

    <span class="token keyword">function</span> <span class="token function">函数</span><span class="token punctuation">(</span> <span class="token parameter">形参 <span class="token punctuation">,</span> 形参<span class="token operator">...</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>

        <span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">;</span>
            创建一个空对象


        
        obj<span class="token punctuation">.</span>属性 <span class="token operator">=</span> 形参<span class="token punctuation">;</span>
        obj<span class="token punctuation">.</span>属性 <span class="token operator">=</span> 形参<span class="token punctuation">;</span>
        <span class="token operator">...</span><span class="token punctuation">.</span>
            设定对象的属性和属性值

        obj<span class="token punctuation">.</span><span class="token function-variable function">函数方法</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
        obj<span class="token punctuation">.</span><span class="token function-variable function">函数方法</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
        <span class="token operator">...</span><span class="token punctuation">.</span>
            设定对象的函数方法

        <span class="token keyword">return</span> obj <span class="token punctuation">;</span>
            返回值是这个创建的对象
    <span class="token punctuation">}</span>

    工厂模式 是 创建 属性和函数方法相同
    属性值不同的 对象 

    创建的对象 都 相同的属性 不同的属性值
    还有 完全相同的函数方法

    每一个对象都存储了完全相同的函数方法
    造成有 冗余的代码程序

<span class="token function-variable function">ES5语法</span><span class="token operator">:</span>

    <span class="token keyword">function</span> <span class="token function">构造函数</span><span class="token punctuation">(</span> <span class="token parameter">形参 <span class="token punctuation">,</span> 形参<span class="token operator">...</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>

        <span class="token keyword">this</span><span class="token punctuation">.</span>属性 <span class="token operator">=</span> 形参<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>属性 <span class="token operator">=</span> 形参<span class="token punctuation">;</span>
        <span class="token operator">...</span><span class="token punctuation">.</span>
            在 构造函数中 通过 <span class="token keyword">this</span> 指向 设定操作对象的属性

    <span class="token punctuation">}</span>

    <span class="token class-name">构造函数</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">函数方法</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token class-name">构造函数</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">函数方法</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token operator">...</span><span class="token punctuation">.</span>
        在 构造函数外 在 构造函数的prototype中 定义 函数方法

    <span class="token keyword">const</span> 实例化对象 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token function">构造函数</span><span class="token punctuation">(</span> 实参 <span class="token punctuation">,</span> 实参<span class="token operator">...</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        通过 <span class="token keyword">new</span> 关键词 调用 构造函数 创建实例化对象

<span class="token constant">ES6</span><span class="token literal-property property">语法</span><span class="token operator">:</span>
    使用<span class="token keyword">class</span>关键词 定义 构造函数
    <span class="token keyword">class</span> 构造函数<span class="token punctuation">{</span>
        在构造器中定义 对象的属性属性值
        <span class="token function">constructor</span><span class="token punctuation">(</span> <span class="token parameter">形参 <span class="token punctuation">,</span> 形参<span class="token operator">...</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>属性 <span class="token operator">=</span> 形参 <span class="token punctuation">;</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span>属性 <span class="token operator">=</span> 形参 <span class="token punctuation">;</span>
            <span class="token operator">...</span><span class="token punctuation">.</span>
        <span class="token punctuation">}</span>

        在构造器外 定义 函数方法 js程序自动定义在 prototype 中
        <span class="token function">函数方法</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> 
        <span class="token function">函数方法</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> 
        <span class="token operator">...</span><span class="token punctuation">.</span>
    <span class="token punctuation">}</span>    
    
    <span class="token keyword">const</span> 实例化对象 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token function">构造函数</span><span class="token punctuation">(</span> 实参 <span class="token punctuation">,</span> 实参<span class="token operator">...</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        通过 <span class="token keyword">new</span> 关键词 调用 构造函数 创建实例化对象
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>总结</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1.</span> <span class="token literal-property property">构造函数</span><span class="token operator">:</span>
    专门创建实例化对象 设定实例化对象 返回实例化对象的函数
    构造函数 必须使用 大驼峰命名法
    构造函数 一般都是和<span class="token keyword">new</span>关键词一起调用
    构造函数 中 不会 独立设定 <span class="token keyword">return</span>

<span class="token number">2.</span> <span class="token literal-property property">实例化对象</span><span class="token operator">:</span>
    通过 构造函数 创建的对象
    通过 实例化对象 可以 调用 构造函数prototype中存储的函数方法

<span class="token number">3.</span> <span class="token keyword">new</span><span class="token operator">:</span>
    调用构造函数时使用的关键词

    作用<span class="token number">1</span>
        调用函数程序时 自动在函数程序内 创建一个 实例化对象
        自动 <span class="token keyword">return</span> 返回这个 实例化对象

    作用<span class="token number">2</span>
        设定 一起调用的构造函数 <span class="token keyword">this</span> 指向是这个 实例化对象

<span class="token number">4.</span> <span class="token literal-property property">实例化对象的属性</span><span class="token operator">:</span>
    实例化对象的属性 用于 存储 数据
    构造函数中 形参的数据 必须要使用 实例化对象的属性存储
    构造函数中 多个函数程序都需要使用的数据 

<span class="token number">5.</span> <span class="token literal-property property">函数方法</span><span class="token operator">:</span>
    函数方法 不是 直接存储在 实例化对象中
    是 存储在 构造函数 prototype 中
    这个构造函数 创建的实例化对象 都可以调用使用

    函数方法中调用的数据 都是 实例化对象 属性中存储的数据
        <span class="token keyword">this</span><span class="token punctuation">.</span>属性

<span class="token number">6.</span> <span class="token literal-property property">prototype</span><span class="token operator">:</span>
    是 每一个 函数天生就有的属性
    是 一个公共的存储空间 可以 存储 数据 和 函数方法
    构造函数 创建的实例化对象 可以 调用 prototype 中 存储的数据和函数方法

<span class="token number">7.</span> <span class="token keyword">this</span><span class="token literal-property property">指向</span><span class="token operator">:</span>
    构造函数 中 <span class="token keyword">this</span>指向 必须是 实例化对象

    构造函数 和 构造函数prototype中存储的函数方法 <span class="token keyword">this</span>指向都是 实例化对象
    设定 和 操作的数据 都是 实例化对象属性中存储的属性值
    <span class="token keyword">this</span>指向 必须是 实例化对象

    构造函数中 其他的函数程序 <span class="token keyword">this</span> 不一定是 实例化对象
        解决方法<span class="token number">1</span>
            将 匿名函数 设定为 箭头函数
            比较简单实用的方法 是 常用方法

        解决方法<span class="token number">2</span>
            提前定义一个变量 存储 <span class="token keyword">this</span>指向是 实例化对象
            将 其他函数中要使用的<span class="token keyword">this</span> 替换为 这个变量      

        解决方法<span class="token number">3</span>
            使用 <span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">apply</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">bind</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 等 方法 设定<span class="token keyword">this</span>指向 
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-原型-原型链" tabindex="-1"><a class="header-anchor" href="#js-原型-原型链" aria-hidden="true">#</a> JS 原型 原型链</h2><details class="custom-container details"><summary>原型 原型链 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">面向对象编程中</span><span class="token operator">:</span> 
    构造函数 创建的实例化对象 
    可以 调用 构造函数中 prototype 中 存储的数据

    执行的是 JavaScript中 原型链的数据调用机制

    之前 接触过 函数中数据的访问机制 

    面向对象中 数据的访问机制

<span class="token literal-property property">prototype</span><span class="token operator">:</span>
    原型 <span class="token operator">/</span> 原型对象

    是 每一个 函数天 生就有的属性

    本质上是一个 对象 数据类型

    是一个 公共的存储空间 
        可以 存储属性属性值
        可以 存储函数方法
        实际项目中 一般只会存储 函数方法

<span class="token literal-property property">__proto__</span><span class="token operator">:</span>
    原型属性

    是 每一个 对象 天生就有的属性
        低版本浏览器 对象中 显示 __proto__
        高版本浏览器 直接显示成 <span class="token punctuation">[</span><span class="token punctuation">[</span>Prototype<span class="token punctuation">]</span><span class="token punctuation">]</span>

    对象的 __proto__ 本质上 是 一个 对象 

    对象的 __proto__ 指向的是 生成这个对象的构造函数的 prototype 

    也就是 实例化对象 本质上 是 通过 __proto__
    访问 构造函数的 prototype

    因为 实例化对象 有 __proto__ 才能 访问 构造函数的 prototype

<span class="token operator">!</span> 原型链访问机制<span class="token operator">:</span> 
    实例化对象 通过 __proto__ 访问 构造函数 prototype

    因为 __proto__ 指向 构造函数 prototype 

    这个数据的访问调用机制 是 原型链最基本的数据访问机制
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-继承" tabindex="-1"><a class="header-anchor" href="#js-继承" aria-hidden="true">#</a> JS 继承</h2><details class="custom-container details"><summary>继承 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>面向对象的继承:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>创建一个新的 构造函数 
从 已经定义好的构造函数中 继承 属性的定义 和 调用函数方法

为了优化代码 减少冗余的程序

适用于 大型项目开发
    实际项目中 使用 模块化开发方式 
    适用于 继承语法进行开发
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>ES5 继承语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>属性继承
    核心原理 
        在 子类构造函数中调用父类构造函数
        通过 call <span class="token operator">/</span> apply 语法 改变父类构造函数 <span class="token keyword">this</span>指向
        同时 给 父类构造函数 赋值实参


函数方法继承
    核心原理
        定义 子类构造函数 prototype 赋值存储 父类实例化对象
        子类构造函数 prototype 也就是 父类实例化对象 
        可以 调用 父类构造函数 prototype 中的 函数方法

组合继承
    两种继承方法一起使用
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>ES6 继承语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>通过 关键词 完成 面向对象继承

<span class="token keyword">extends</span>
    定义 继承的父类构造函数
    定义了 <span class="token keyword">extends</span> 自动继承父类构造函数所有的属性和函数方法

<span class="token keyword">super</span>
    在 构造器中 定义 父类构造函数 赋值的实参
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-正则表达式" tabindex="-1"><a class="header-anchor" href="#js-正则表达式" aria-hidden="true">#</a> JS 正则表达式</h2><details class="custom-container details"><summary>正则表达式 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1. 概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>正则表达式是JavaScript中一种数据类型
用于 对字符串内容进行验证
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>字面量语法
    <span class="token keyword">let</span> 变量 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">正则</span><span class="token regex-delimiter">/</span></span> <span class="token punctuation">;</span>
        推荐使用的语法形式
        不能解析变量

        如果正则表达式中包含变量 
        需要使用模板字符串解析
        通过 <span class="token function">eval</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 来执行

构造函数语法
    <span class="token keyword">let</span> 变量 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span> 正则 <span class="token punctuation">,</span> <span class="token string">&#39;g&#39;</span> 或者 <span class="token string">&#39;i&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

        可以解析变量

        如果需要定义 修饰符 g <span class="token operator">/</span> i 
        需要定义在 参数<span class="token number">2</span> 中
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3. 元字符:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>\d      数字
\<span class="token constant">D</span>      非数字
\w      数字 字母 下划线
\<span class="token constant">W</span>      非数字 字母 下划线
\s      空格
\<span class="token constant">S</span>      非空格
<span class="token punctuation">.</span>       <span class="token function">任意内容</span><span class="token punctuation">(</span>非换行<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>4. 边界符:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">^</span>       起始符号
$       结束符号
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>5. 限定符:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>限定符 一般都是配合边界符使用的
<span class="token operator">*</span>       <span class="token number">0</span> 至 正无穷个
<span class="token operator">+</span>       <span class="token number">1</span> 至 正无穷个
<span class="token operator">?</span>       <span class="token number">0</span> 至 <span class="token number">1</span> 个
<span class="token punctuation">{</span>n<span class="token punctuation">}</span>     n个
<span class="token punctuation">{</span>n<span class="token punctuation">,</span><span class="token punctuation">}</span>    n 至 正无穷个
<span class="token punctuation">{</span>n<span class="token punctuation">,</span>m<span class="token punctuation">}</span>   n 至 m 个
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>6. 特殊符号:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">|</span>       <span class="token function">逻辑或</span>
<span class="token punctuation">(</span><span class="token punctuation">)</span>      将其中的内容作为一个整体
<span class="token punctuation">[</span><span class="token punctuation">]</span>      其中任意一个内容就可以
n<span class="token operator">-</span>m     n至m个
<span class="token punctuation">[</span><span class="token operator">^</span><span class="token punctuation">]</span>     取反
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>7. 修饰符:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>写在 正则表达式外 一般是配合函数等使用

<span class="token operator">/</span> <span class="token operator">/</span>i
    忽略大小写
    大小写不敏感

<span class="token operator">/</span> <span class="token operator">/</span>g
    全局匹配
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>8. 正则表达式函数方法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>正则<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>字符串<span class="token punctuation">)</span><span class="token punctuation">;</span>
    验证字符串内容 是不是 符合 正则表达式
    如果 符合 结果是 <span class="token boolean">true</span>
    如果 不符合 结果是 <span class="token boolean">false</span>

正则<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>字符串<span class="token punctuation">)</span><span class="token punctuation">;</span>
    捕获字符串中 符合 正则表达式的内容

    如果 正则表达式 没有 <span class="token operator">/</span> <span class="token operator">/</span>g 全局匹配

        如果没有匹配内容 获取结果 <span class="token keyword">null</span>
        如果有匹配内容 获取结果是 一个 数组
            数组中带有字符串索引的单元
            索引下标是 <span class="token number">0</span> 的单元 存储 捕获的数据

        <span class="token operator">!</span> 多次捕获 获取结果都是 第一个符合正则的内容

    
    如果 正则表达式 有 <span class="token operator">/</span> <span class="token operator">/</span>g 全局匹配
        如果没有匹配内容 获取结果 <span class="token keyword">null</span>
        如果有匹配内容 获取结果是 一个 数组
            数组中带有字符串索引的单元
            索引下标是 <span class="token number">0</span> 的单元 存储 捕获的数据

        <span class="token operator">!</span>   多次捕获 是 从字符串中 每次获取一个符合的内容
            直到获取结果是 <span class="token keyword">null</span> 从字符串起始 再次开始 重新获取
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>9. 和正则表达式配合的字符串函数:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>字符串<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">正则</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
    查询匹配内容
    支持 正则表达式 忽略大小写

字符串<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">正则</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span> <span class="token punctuation">,</span> 新内容 <span class="token punctuation">)</span><span class="token punctuation">;</span>
    字符串替换
    支持 正则表达式 替换所有匹配的内容

字符串<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span> <span class="token operator">/</span>正则<span class="token operator">/</span> 或者 <span class="token operator">/</span>正则<span class="token operator">/</span>g <span class="token punctuation">)</span><span class="token punctuation">;</span>
    字符串捕获

    如果 是 没有 全局匹配的正则表达式
        获取结果 和 正则<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>字符串<span class="token punctuation">)</span> 执行结果相同

    如果 是 有 全局匹配的正则表达式
        获取结果 是 一个数组
        数组单元是所有符合结果的数据
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-递归函数" tabindex="-1"><a class="header-anchor" href="#js-递归函数" aria-hidden="true">#</a> JS 递归函数</h2><details class="custom-container details"><summary>递归函数 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>递归函数 是 函数的一种调用方式
通过在函数内部 调用 函数自己

<span class="token operator">!</span>   必须要确定 什么时候 终止递归
    也就是 <span class="token keyword">return</span> 的是 一个数据 不是 递归调用

<span class="token operator">!</span>   递归嵌套的进入 是 从 外层递归 进入 内层递归
<span class="token operator">!</span>   递归嵌套的结束 是 从 内层地址 返回 外层递归

<span class="token keyword">function</span> <span class="token function">函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

    <span class="token function">函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-闭包" tabindex="-1"><a class="header-anchor" href="#js-闭包" aria-hidden="true">#</a> JS 闭包</h2><details class="custom-container details"><summary>闭包 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>函数的一种应用方式 

将 容易被污染的全局变量 定义成局部变量
在函数中通过返回值是匿名函数的方式
操作函数中的局部变量
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>函数的基本执行原理:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">封装</span><span class="token operator">:</span> 
    <span class="token number">1</span>   在 堆 中 创建 存储空间 准备存储函数程序
        操作系统给存储空间分配内存地址

    <span class="token number">2</span>   将 函数程序 以 字符串形式存储到 存储空间中

    <span class="token number">3</span>   将 函数名称 存储 到 栈 中
        函数名称中存储的是 函数的内存地址
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>调用执行:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1</span>   根据 栈 中 存储的函数名称
    解析其中存储的内存地址
    找到对应的存储空间
    读取其中存储的函数程序代码

<span class="token number">2</span>   给 形参赋值实参

<span class="token number">3</span>   函数程序 预解析

<span class="token number">4</span>   执行函数
    在函数的存储空间中 创建一个 执行空间
    将函数的局部变量都定义在 执行空间中

    在函数执行是 执行空间存在 存储 函数的局部变量
    函数执行结束 执行空间销毁 局部变量也会被销毁

    这样的程序执行方式 称为 JavaScript内存回收机制
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>生成不会被销毁的执行空间:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>函数的返回值 是 引用数据类型
在函数外 有 对应的变量 存储 函数返回值

也就是 存储 引用数据类型的内存地址

引用数据类型的内存地址 正在函数外被使用
执行空间就不会被销毁
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>闭包的基本语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    局部变量

    <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        操作局部变量
    <span class="token punctuation">}</span>

<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>闭包的优点缺点</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>优点<span class="token operator">:</span>
<span class="token operator">-</span> <span class="token function">函数内部的其他的变量不会对代码全局环境造成污染</span>

<span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>缺点<span class="token operator">:</span>
<span class="token operator">-</span> 函数执行完后，函数内部的局部变量没有释放，占用内存时间会变长，
  导致变量不会被垃圾回收机制回收，造成内存消耗  

<span class="token operator">-</span> 不恰当的使用闭包可能会造成内存泄漏的问题
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-常见的模式" tabindex="-1"><a class="header-anchor" href="#js-常见的模式" aria-hidden="true">#</a> JS 常见的模式</h2><details class="custom-container details"><summary>常见的模式 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1.单利模式:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>改造 构造函数 
不是在实例化对象中存储数据
是在调用执行函数时 输入对应的实参

通过 闭包的语法形式 
将 关键变量 存储到函数中
防止全局变量污染

通过 调用 <span class="token keyword">return</span> 的匿名函数
操作调用 被保护的全局变量

单利模式 创建的实例化对象 都是 同一个实例化对象
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2.设计模式(策略模式):</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>将 多种情况的<span class="token keyword">if</span>判断 进行修改
将 每一种条件 情况 设定成 列表

通过 列表 动态渲染生成页面

新增情况 在列表中 新增 对象<span class="token operator">/</span>数组单元

删除情况 在列表中 删除 对象<span class="token operator">/</span>数组单元 或者 修改 对象<span class="token operator">/</span>数组单元属性

核心
    将 多种情况的 <span class="token keyword">if</span>判断 或者 <span class="token keyword">switch</span>判断 
    写成 通过属性调用属性值

    减少 <span class="token keyword">if</span>判断 提高程序的执行效率
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>3.观察者模式(发布订阅模式):</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>主体数据状态改变 通知相关个体数据状态也执行相应的改变
需要配合 三阶段的双向数据绑定执行

需要一个消息盒子
    以对象的形式存储 事件类型 和 事件处理函数

    对象的键名是 事件类型
    对象的键值是 事件处理函数
                事件处理函数 以 数组的形式存储

需要一个新增方法
    通过新增方法 向 消息盒子中 新增 事件类型和事件处理函数

    参数<span class="token number">1</span>   事件类型名称
    参数<span class="token number">2</span>   以 展开合并运算符形式 使用 数组存储新增事件处理函数

    如果 要新增的事件类型 不存在 
        直接给 消息盒子新增 事件类型和事件处理函数

    如果 要新增的事件类型 已经存在
        循环遍历 要新增的事件处理函数 没有存储在 消息盒子中
        再 向 消息盒子中的对应数组 新增事件处理函数

需要一个删除方法
    通过删除方法 删除消息盒子中 指定 事件类型 中 存储的事件处理函数

    参数<span class="token number">1</span>   事件类型名称
    参数<span class="token number">2</span>   以 展开合并运算符形式 使用 数组存储新增事件处理函数

    循环遍历方法<span class="token number">1</span>   参数<span class="token number">2</span>
        需要判断 如果 消息盒子对应的数组中 存储了 要删除的事件处理函数
        再执行 数组删除操作

        如果直接删除 查询结果是 <span class="token operator">-</span><span class="token number">1</span> 删除的最后一个单元

    循环遍历方法<span class="token number">2</span>   消息盒子数组
        触发删除操作的数组 和 循环遍历的数组是同一个数组
        防止数组坍塌的影响

需要一个执行方法
    通过执行方法 执行消息盒子中 指定 事件类型 中 存储的事件处理函数

    参数<span class="token number">1</span>   事件类型名称
    参数<span class="token number">2</span>   以 展开合并运算符形式 使用 数组存储新增事件处理函数

    循环遍历 
        参数<span class="token number">2</span> 数组中存储的事件处理函数
        如果 在 消息盒子数组中存储 
        触发执行 参数<span class="token number">2</span> 中 存储的事件处理函数
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="http协议" tabindex="-1"><a class="header-anchor" href="#http协议" aria-hidden="true">#</a> http协议</h2><details class="custom-container details"><summary>http协议 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>是 客户端 和 服务器 执行数据交互时 遵守的有线网络传输协议

http协议 是 目前使用最广泛的 网络传输协议

https协议 是 加密的 网络传输协议
    每一个 客户端和服务器 都有独立的 加密的 密钥
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>三次握手:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>客户端和服务器 正式创建连接之前 触发执行的程序
目的是为了确保 客户端和服务器 都能正常工作

<span class="token literal-property property">第一次握手</span><span class="token operator">:</span>  
    客户端 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 服务器 发送请求
        客户端
            客户端 正常 发送请求

        服务器
            服务器 正常 接收请求
            客户端 正常 发送请求

<span class="token literal-property property">第二次握手</span><span class="token operator">:</span>  
    服务器 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 客户端 发送请求

        服务器 
            服务器 正常 发送请求

        客户端
            客户端 正常 接收请求

            服务器 正常 发送请求
            服务器 正常 接收请求

<span class="token literal-property property">第三次握手</span><span class="token operator">:</span>  
    客户端 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 服务器 发送请求
        服务器 
            客户端 正常 接收请求
</code></pre><div class="highlight-lines"><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>四次挥手:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>客户端 和 服务器 正式断开链接之前 触发执行的程序

<span class="token literal-property property">第一次挥手</span><span class="token operator">:</span>
    客户端 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 服务器 发送请求
        客户端 告诉 服务器 客户端准备断开连接

<span class="token literal-property property">第二次挥手</span><span class="token operator">:</span>
    服务器 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 客户端 发送请求
        服务器 告诉 客户端 服务器知道客户端准备断开链接
        服务器 向客户端发送 询问 等待 客户端回应

        如果 客户端没有回应 
        表示 客户端要继续执行 断开连接操作
        服务器 继续执行 四次挥手

<span class="token literal-property property">第三次挥手</span><span class="token operator">:</span>
    服务器 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 客户端 发送请求
        服务器 告诉 客户端 服务器 正式关闭
        服务器 不在 发送请求
        服务器 可以 接收请求

<span class="token literal-property property">第四次挥手</span><span class="token operator">:</span>
    客户端 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 服务器 发送请求
        客户端 告诉 服务器 客户端知道服务器已经关闭了
        客户端 也关闭了
        客户端 不再 接收请求
        客户端 可以 发送请求
</code></pre><div class="highlight-lines"><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>请求报文:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>请求报文是发送请求时执行的http协议程序
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>请求行:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token constant">POST</span> 
    请求方式

<span class="token operator">/</span>demo<span class="token punctuation">.</span>php
    请求url地址 

<span class="token constant">HTTP</span><span class="token operator">/</span><span class="token number">1.1</span>
    请求协议 以及 协议版本
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>请求头:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">Accept</span><span class="token operator">:</span> text<span class="token operator">/</span>html<span class="token punctuation">,</span>application<span class="token operator">/</span>xhtml<span class="token operator">+</span>xml<span class="token punctuation">,</span>application<span class="token operator">/</span>xml<span class="token punctuation">;</span>q<span class="token operator">=</span><span class="token number">0.9</span><span class="token punctuation">,</span>image<span class="token operator">/</span>avif<span class="token punctuation">,</span>image<span class="token operator">/</span>webp<span class="token punctuation">,</span>image<span class="token operator">/</span>apng<span class="token punctuation">,</span><span class="token punctuation">;</span>q<span class="token operator">=</span><span class="token number">0.8</span><span class="token punctuation">,</span>application<span class="token operator">/</span>signed<span class="token operator">-</span>exchange<span class="token punctuation">;</span>v<span class="token operator">=</span>b3<span class="token punctuation">;</span>q<span class="token operator">=</span><span class="token number">0.9</span>
    希望的 后端程序响应的文件格式

<span class="token literal-property property">Host</span><span class="token operator">:</span> <span class="token number">127.0</span><span class="token number">.0</span><span class="token number">.1</span>
    服务器 <span class="token constant">IP</span>地址 或者 域名

<span class="token literal-property property">Origin</span><span class="token operator">:</span> http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">127.0</span><span class="token number">.0</span><span class="token number">.1</span>
    服务器 根目录地址

<span class="token literal-property property">Referer</span><span class="token operator">:</span> http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">127.0</span><span class="token number">.0</span><span class="token number">.1</span><span class="token operator">/</span>demo<span class="token punctuation">.</span>html
    当前 发起请求的文件路径

User<span class="token operator">-</span>Agent<span class="token operator">:</span> Mozilla<span class="token operator">/</span><span class="token number">5.0</span> <span class="token punctuation">(</span>Windows <span class="token constant">NT</span> <span class="token number">10.0</span><span class="token punctuation">;</span> <span class="token constant">WOW64</span><span class="token punctuation">)</span> AppleWebKit<span class="token operator">/</span><span class="token number">537.36</span> <span class="token punctuation">(</span><span class="token constant">KHTML</span><span class="token punctuation">,</span> like Gecko<span class="token punctuation">)</span> Chrome<span class="token operator">/</span><span class="token number">104.0</span><span class="token number">.0</span><span class="token number">.0</span> Safari<span class="token operator">/</span><span class="token number">537.36</span>
    当前 浏览器配置信息

Content<span class="token operator">-</span>Type<span class="token operator">:</span> application<span class="token operator">/</span>x<span class="token operator">-</span>www<span class="token operator">-</span>form<span class="token operator">-</span>urlencoded
    <span class="token operator">!</span>   post请求 特有的 请求头设定
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>请求空行:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>请求头 和 请求体 之间的空行
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>请求体:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>post方式才有请求体
<span class="token keyword">get</span>方式通过浏览器地址栏携带参数 没有请求体
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>响应报文:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>响应报文是发送响应时执行的http协议程序
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>响应行:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>    <span class="token constant">HTTP</span><span class="token operator">/</span><span class="token number">1.1</span> 
        协议和版本
    
    <span class="token number">200</span>     
        http状态码
    
    <span class="token constant">OK</span>
        http状态描述
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>响应头:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">Server</span><span class="token operator">:</span> nginx<span class="token operator">/</span><span class="token number">1.15</span><span class="token number">.11</span>
    服务器类型和版本

<span class="token literal-property property">Date</span><span class="token operator">:</span> Thu<span class="token punctuation">,</span> <span class="token number">22</span> Sep <span class="token number">2022</span> <span class="token number">08</span><span class="token operator">:</span><span class="token number">19</span><span class="token operator">:</span><span class="token number">52</span> <span class="token constant">GMT</span>
    服务器时间 世界标准时

Content<span class="token operator">-</span>Type<span class="token operator">:</span> text<span class="token operator">/</span>html<span class="token punctuation">;</span> charset<span class="token operator">=</span><span class="token constant">UTF</span><span class="token operator">-</span><span class="token number">8</span>
    响应内容 编码格式

<span class="token constant">X</span><span class="token operator">-</span>Powered<span class="token operator">-</span>By<span class="token operator">:</span> <span class="token constant">PHP</span><span class="token operator">/</span><span class="token number">7.3</span><span class="token number">.4</span>
    后端语言和版本
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>响应体:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>后端程序输出的内容
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p><strong>http状态码:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">100</span> <span class="token operator">-</span> <span class="token number">199</span>
    连接成功 等待下一步操作

<span class="token number">200</span> <span class="token operator">-</span> <span class="token number">299</span>
    请求成功

<span class="token number">300</span> <span class="token operator">-</span> <span class="token number">399</span> 
    重定向请求

<span class="token number">400</span> <span class="token operator">-</span> <span class="token number">499</span> 
    请求错误 原因是 客户端 引起的

<span class="token number">500</span> <span class="token operator">-</span> <span class="token number">599</span>
    请求错误 原因是 服务器 引起的
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="ajax" tabindex="-1"><a class="header-anchor" href="#ajax" aria-hidden="true">#</a> ajax</h2><details class="custom-container details"><summary>ajax <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>ajax交互
    通过 js 技术 向 指定的服务器路径 发送请求
    使用的是http协议

    天生就是异步程序
        可以通过设定参数 设定为 同步程序

    ajax请求 是 局部数据交互
        不用跳转页面就可以实现数据交互

    步骤过程
        <span class="token number">1.</span>  创建 ajax实例化对象

        <span class="token number">2.</span>  设定 请求方式 和 请求地址

        <span class="token number">3.</span>  发送 配置好的请求

        <span class="token number">4.</span>  接收 请求结果
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="promise" tabindex="-1"><a class="header-anchor" href="#promise" aria-hidden="true">#</a> promise</h2><details class="custom-container details"><summary>promise <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>回调地狱:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>异步程序中 回调函数 往往需要嵌套执行

    <span class="token number">1</span><span class="token punctuation">,</span>  异步程序如果定义的并列的形式
        异步程序会同时执行

    <span class="token number">2</span><span class="token punctuation">,</span>  不同的异步程序之间数据的调用
        因为并列语法的异步程序是同时执行
        上一个异步程序还没有执行结束
        下一个异步程序已经开始执行

        无法获取上一个异步程序的数据
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>promise:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token constant">ES6</span>新增语法 专门解决回调地狱

创建 promise实例化对象
通过 promise执行异步程序

通过 promise实例化对象中 <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 方法 定义 异步程序执行成功 触发的函数程序
通过 promise实例化对象中 <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 方法 定义 异步程序执行失败 触发的函数程序

promise的三个状态
    状态<span class="token number">1</span>   异步请求还在执行
        peading

    状态<span class="token number">2</span>   异步请求执行成功
        fulfilled

    状态<span class="token number">3</span>   异步请求执行失败
        rejected

        promise的执行状态一旦确定 就不能更改了


基本语法
    <span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">fulfilled <span class="token punctuation">,</span> rejected</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
        异步程序<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 成功执行的程序 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    p<span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 失败执行的程序 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

promise的函数封装
    
    <span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span> <span class="token parameter">异步程序参数</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">const</span> p <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">fulfilled <span class="token punctuation">,</span> rejected</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            异步程序<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

        <span class="token keyword">return</span> p <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">fun</span><span class="token punctuation">(</span> 异步程序参数 <span class="token punctuation">)</span>

    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        成功的程序

        <span class="token keyword">return</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>async与await:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token constant">ES7</span>新增语法 专门配合 promise使用的语法形式

通过 <span class="token keyword">async</span> 声明 函数

在 <span class="token keyword">async</span>声明的函数中 通过 <span class="token keyword">await</span> 调用封装的promise函数
执行结果是 异步请求的响应体数据


<span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> res1 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">封装的promise函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> res2 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">封装的promise函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> res3 <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">封装的promise函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="js-同源-跨域-请求" tabindex="-1"><a class="header-anchor" href="#js-同源-跨域-请求" aria-hidden="true">#</a> JS 同源/跨域 请求</h2><details class="custom-container details"><summary>同源/跨域 请求 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>同源请求 跨域请求</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>发送请求时 请求由 <span class="token number">3</span>部分 组成
    请求协议
    请求地址
    服务器端口

<span class="token literal-property property">http</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>localhost<span class="token operator">:</span><span class="token number">8888</span><span class="token operator">/</span>test<span class="token operator">/</span>fourth
    http
        请求协议

    localhost
        请求地址

    <span class="token number">8888</span>
        服务器端口
        如果不写端口默认端口是 <span class="token number">80</span>

发送请求时 文件地址路径 和 接受请求的服务器地址路径
    如果 这三项配置有一项不同 
        就是 跨域请求

    如果 这三项配置都相同
        就是 同源请求
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>服务器执行的同源策略:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>所谓的服务器同源策略 指的是 
只有同源请求 服务器才会允许
请求才能正常执行 

如果是跨域请求 服务器默认会阻止这个请求
发送的跨域请求就不能正常执行
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>解决跨域访问的方法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1.</span>  <span class="token literal-property property">cors</span><span class="token operator">:</span>
    后端程序 通过 设定 cors代码程序
    告诉浏览器 当前后端程序 支持 任意请求访问

    对于这个后端程序 服务器不会阻止跨域请求

<span class="token number">2.</span>  <span class="token literal-property property">jsonp</span><span class="token operator">:</span>

    本质 前端定义函数
    后端程序调用函数 <span class="token function">同时赋值后端程序的实参</span>

    <span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> 前端程序定义好一个函数
        函数必须有一个形参
        形参存储后端程序赋值的实参数据
        函数的程序 就是 操作形参 也就是 <span class="token function">操作后端的实参数据</span>

    <span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token function">定义一个script节点标签</span>

    <span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span> 设定script节点 src属性
        也就是后端程序的数据接口地址
        携带后端程序需要的数据参数

        <span class="token function">其中一定有一个键名传参函数名称</span>

    <span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token function">写入script标签</span>

    <span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span> 删除script标签

<span class="token number">3.</span>  <span class="token literal-property property">proxy服务器代理方法</span><span class="token operator">:</span>
    通过服务器设定代理配置
    通过服务器运行文件 使用 代理 发送请求
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="浏览器-本地存储" tabindex="-1"><a class="header-anchor" href="#浏览器-本地存储" aria-hidden="true">#</a> 浏览器 本地存储</h2><details class="custom-container details"><summary>浏览器 本地存储 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>localStorage:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>浏览器提供的本地存储方式
以 键值对 的形式 存储数据

可以使用 JavaScript定义的函数方法操作
可以使用 对象操作语法形式操作

<span class="token literal-property property">设定</span><span class="token operator">:</span>
    window<span class="token punctuation">.</span>localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span> 键名 <span class="token punctuation">,</span> 键值 <span class="token punctuation">)</span><span class="token punctuation">;</span>

    window<span class="token punctuation">.</span>localStorage<span class="token punctuation">.</span>键名 <span class="token operator">=</span> 键值 <span class="token punctuation">;</span>

<span class="token literal-property property">获取</span><span class="token operator">:</span>
    <span class="token keyword">let</span> 变量 <span class="token operator">=</span> window<span class="token punctuation">.</span>localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span> 键名 <span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">let</span> 变量 <span class="token operator">=</span> window<span class="token punctuation">.</span>localStorage<span class="token punctuation">.</span>键名 <span class="token punctuation">;</span>

<span class="token literal-property property">删除</span><span class="token operator">:</span>
    window<span class="token punctuation">.</span>localStorage<span class="token punctuation">.</span><span class="token function">removeItem</span><span class="token punctuation">(</span> 键名 <span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">delete</span><span class="token punctuation">(</span> window<span class="token punctuation">.</span>localStorage<span class="token punctuation">.</span>键名 <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">清空</span><span class="token operator">:</span>
    window<span class="token punctuation">.</span>localStorage<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>cookie:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>浏览器提供的本地存储方式

cookie的主要属性包括 
    键名 键值 路径 时效

    路径
        符合路径的文件才能访问cookie

    时效
        超过时效 浏览器会自动删除cookie

    判断 两个cookie是不是相同 
        需要判断 cookie 的 键名 和 路径



<span class="token literal-property property">cookie的设定语法</span><span class="token operator">:</span>
    设定
        document<span class="token punctuation">.</span>cookie <span class="token operator">=</span> <span class="token string">&#39;键名=键值;path=路径;expires=时效&#39;</span><span class="token punctuation">;</span>
            键名 键值 是 必须设定的属性

            路径
                如果不设定路径 JavaScript程序自动设定路径
                设定成当前文件所在的文件夹

                如果设定路径 <span class="token operator">/</span> 设定是服务器根目录
                实际项目中 每个服务器都有自己的根目录

            时效
                如果不设定时效 JavaScript程序自动设定时效
                设定成会话时效 session时效
                    浏览器执行 cookie存在
                    浏览器关闭 cookie删除

                如果设定时效 设定的是 时间时效
                    设定的时间时效 必须是 世界标准时

                如果要删除 cookie 只要设定cookie时效过期

    <span class="token literal-property property">获取</span><span class="token operator">:</span>
        <span class="token keyword">let</span> 变量 <span class="token operator">=</span> document<span class="token punctuation">.</span>cookie
            获取的结果是 键值对 字符串
            需要转化为 对应的 对象
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>cookie和localStorage的区别:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1</span>   cookie运行必须要通过服务器
    localStorage可以本地运行 不经过服务器

<span class="token number">2</span>   cookie前端程序 后端程序 都可以操作
    localStorage只能前端程序操作

<span class="token number">3</span>   cookie有路径 符合路径的文件才能访问
    localStorage路径就是根目录路径

<span class="token number">4</span>   cookie有时效 不符合时效的cookie会自动删除
    localStorage没有时效 除非手动删除 不然会一直存在

<span class="token number">5</span>   cookie存储文件比较小 一般是 4K 左右
    localStorage存储文件比较大 一般是 4M 左右

<span class="token number">6</span>   cookie只能存储字符串
    localStorage可以存储字符串和json字符串
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>实际项目中:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>使用 cookie 存储简答的字符串数据
使用 localStorage 存储 复杂数据转化的json字符串

cookie 和 localStorage 都是本地存储 
安全性不高 不会存储 关键数据信息
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="nodejs" tabindex="-1"><a class="header-anchor" href="#nodejs" aria-hidden="true">#</a> nodejs</h2><blockquote><p>nodejs天生就是异步程序</p></blockquote><details class="custom-container details"><summary>nodejs <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>概念:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>基于 chrome v8 引擎的 JavaScript运行环境

将 浏览器 chrome <span class="token constant">V8</span> 引擎 剥离出来
生成一个独立的运行环境 运行 JavaScript程序
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>浏览器运行和nodejs运行的对比:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>浏览器 运行 JavaScript
    可以 
        ECMAScript
        <span class="token constant">DOM</span>
        <span class="token constant">BOM</span>
    不能 
        <span class="token constant">I</span><span class="token operator">/</span><span class="token constant">O</span> 线程操作

nodejs 运行 JavaScript
    可以 
        ECMAScript
        <span class="token constant">I</span><span class="token operator">/</span><span class="token constant">O</span> 线程操作

    不能
        <span class="token constant">DOM</span>
        <span class="token constant">BOM</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>nodejs运行方式:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1.</span>  window操作系统自带的 powershell
    模拟 cmd 
    有些命令和cmd不同
    不推荐使用

<span class="token number">2.</span>  cmd 命令行

<span class="token number">3.</span>  vscode 终端
    设定终端是 cmd 方式
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>nodejs运行JavaScript程序方式:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">1.</span>  直接运行程序

    在 任意路径下 输入 node 回车

    进入 node编辑环境
    直接输入 js程序

    输入的程序 执行的结果 不会保存
    关闭 cmd 程序和结果就会丢失

<span class="token number">2.</span>  运行 外部文件

    切换路径到文件所在文件夹
        <span class="token literal-property property">盘符</span><span class="token operator">:</span> 回车  
            切换盘符

        cd 空格 路径 回车
            切换路径

    node 文件名 回车
        运行对应的文件
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="模块化开发" tabindex="-1"><a class="header-anchor" href="#模块化开发" aria-hidden="true">#</a> 模块化开发</h2><details class="custom-container details"><summary>模块化开发 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>将 计算机程序 以 导出导入的方式加载
    防止全局变量污染
    依赖清晰
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>后端模块化:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>nodejs 的 commonJs
    导出
        module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>  <span class="token punctuation">}</span>

    导入
        <span class="token keyword">const</span> 变量 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span> 路径 <span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>前端模块化:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token constant">IIFE</span><span class="token operator">:</span>
    通过立即执行函数 向 window顶级对象 添加 <span class="token function">数据</span>

    <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        定义数据 

        window<span class="token punctuation">.</span>键名 <span class="token operator">=</span> <span class="token punctuation">{</span>  <span class="token punctuation">}</span><span class="token punctuation">;</span>

    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token constant">AMD</span><span class="token operator">:</span>
    <span class="token literal-property property">前置依赖</span><span class="token operator">:</span>
        执行程序时会按照顺序 加载执行所有的 模块化文件

        初次打开页面 会比较卡顿
        之后程序程序会比较流畅

        需要导入一个 require<span class="token punctuation">.</span>js 文件

    <span class="token literal-property property">语法形式</span><span class="token operator">:</span>

        <span class="token literal-property property">独立模块</span><span class="token operator">:</span>
            <span class="token function">define</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                定义数据

                <span class="token keyword">return</span> <span class="token punctuation">{</span> 导出的数据 <span class="token punctuation">}</span>

            <span class="token punctuation">}</span><span class="token punctuation">)</span>

        <span class="token literal-property property">依赖模块</span><span class="token operator">:</span>
            <span class="token function">define</span><span class="token punctuation">(</span> <span class="token punctuation">[</span> 路径<span class="token number">1</span> <span class="token punctuation">,</span> 路径<span class="token number">2</span> <span class="token operator">...</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">形参<span class="token number">1</span> <span class="token punctuation">,</span> 形参<span class="token number">2</span> <span class="token operator">...</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                定义数据 

                <span class="token keyword">return</span> <span class="token punctuation">{</span> 导出的数据 <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>           

        <span class="token literal-property property">整合模块</span><span class="token operator">:</span>

            <span class="token function">require</span><span class="token punctuation">(</span> <span class="token punctuation">[</span> 路径<span class="token number">1</span> <span class="token punctuation">,</span> 路径<span class="token number">2</span> <span class="token operator">...</span><span class="token punctuation">.</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span>  <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">形参<span class="token number">1</span> <span class="token punctuation">,</span> 形参<span class="token number">2</span> <span class="token operator">...</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                执行的程序
            <span class="token punctuation">}</span><span class="token punctuation">)</span>           
          
<span class="token constant">CMD</span><span class="token operator">:</span>

    <span class="token literal-property property">即时依赖</span><span class="token operator">:</span>
        需要哪个模块在加载哪个模块

        初次打开页面执行流畅
        之后页面滚动 触发加载新的模块 会出现卡顿

        需要 sea<span class="token punctuation">.</span>js 外部文件

    <span class="token literal-property property">语法形式</span><span class="token operator">:</span>
        <span class="token literal-property property">独立模块</span><span class="token operator">:</span>
            <span class="token function">define</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                定义数据 

                参数<span class="token number">3</span><span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

            <span class="token punctuation">}</span><span class="token punctuation">)</span>


        <span class="token literal-property property">依赖模块</span><span class="token operator">:</span>

            <span class="token function">define</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span> <span class="token punctuation">,</span> 参数<span class="token number">3</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>

                <span class="token keyword">const</span> 变量 <span class="token operator">=</span> <span class="token function">参数1</span><span class="token punctuation">(</span> 地址路径 <span class="token punctuation">)</span><span class="token punctuation">;</span>

                定义数据 

                参数<span class="token number">3</span><span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>

            <span class="token punctuation">}</span><span class="token punctuation">)</span>

        <span class="token literal-property property">整合模块</span><span class="token operator">:</span>

            seajs<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span> 路径<span class="token number">1</span> <span class="token punctuation">,</span> 路径<span class="token number">2</span> <span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">形参<span class="token number">1</span> <span class="token punctuation">,</span> 形参<span class="token number">2</span> <span class="token operator">...</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                要执行的程序

            <span class="token punctuation">}</span><span class="token punctuation">)</span>
            
<span class="token constant">ES6</span><span class="token operator">:</span>
    设定 script标签 type属性为 module
    需要通过 服务器运行 文件

        <span class="token literal-property property">语法形式</span><span class="token operator">:</span>

        html标签 script标签
            <span class="token operator">&lt;</span>script type<span class="token operator">=</span><span class="token string">&quot;module&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

        <span class="token literal-property property">js文件</span><span class="token operator">:</span>

            直接定义 数据 

            整个导出 
                <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> 导出的数据 <span class="token punctuation">}</span>

            整个导入
                <span class="token keyword">import</span> 变量 from 路径 

                <span class="token operator">!</span> 以对象的形式 导出导入数据

            独立导出
                <span class="token keyword">export</span> 变量<span class="token number">1</span> <span class="token operator">=</span> 数据 <span class="token punctuation">;</span>
                <span class="token keyword">export</span> 变量<span class="token number">2</span> <span class="token operator">=</span> 数据 <span class="token punctuation">;</span>
                <span class="token keyword">export</span> 变量<span class="token number">3</span> <span class="token operator">=</span> 数据 <span class="token punctuation">;</span>

            独立导入
                <span class="token keyword">import</span> 变量<span class="token number">1</span> <span class="token punctuation">,</span> 变量<span class="token number">2</span> <span class="token punctuation">,</span> 变量<span class="token number">3</span> from 路径
                
                <span class="token operator">!</span> 以变量的形式 导出导入数据
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="内置模块" tabindex="-1"><a class="header-anchor" href="#内置模块" aria-hidden="true">#</a> 内置模块</h2><details class="custom-container details"><summary>内置模块 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>fs:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>读取 设置 文件内容

<span class="token literal-property property">导入</span><span class="token operator">:</span> 
    <span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;fs&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">使用</span><span class="token operator">:</span>
    fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span> <span class="token string">&#39;路径&#39;</span> <span class="token punctuation">,</span> <span class="token string">&#39;编码格式&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
        参数<span class="token number">1</span>   路径    
            需要读取文件的路径

        参数<span class="token number">2</span>   编码格式
            读取文件获取内容的编码格式
            默认是 buffer格式 
                以 十六进制 形式 表示 字符内容
            可以设定 utf8 <span class="token operator">/</span> utf<span class="token operator">-</span><span class="token number">8</span> 格式

        参数<span class="token number">3</span>   回调函数
            回调函数的参数<span class="token number">1</span>
                存储报错信息 
                如果 正确读取文件 存储 <span class="token keyword">null</span>
                如果 文件不能正常读取 存储 报错信息
                
            回调函数的参数<span class="token number">2</span>
                存储读取文件内容信息
                如果 争取读取文件 存储 读取的文件信息
                如果 文件不能正确读取 存储 <span class="token keyword">undefined</span>

        
    <span class="token punctuation">}</span><span class="token punctuation">)</span>


    fs<span class="token punctuation">.</span><span class="token function">writeFile</span><span class="token punctuation">(</span> <span class="token string">&#39;路径地址&#39;</span> <span class="token punctuation">,</span> <span class="token string">&#39;写入内容&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        参数<span class="token number">1</span>   要写入内容的文件的路径地址
            如果 有这个文件 就 对这个文件写入内容
            如果 没有这个文件 就 创建这个文件 写入内容
            写入操作 一定会执行成功

        参数<span class="token number">2</span>   要写入的内容
            写入内容必须是字符串格式

        参数<span class="token number">3</span>   回调函数
            写入完成 执行的回调函数

    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>url:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>解析 浏览器地址栏 url地址信息

导入 
    <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;url&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

使用
    <span class="token keyword">const</span> 变量 <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span> <span class="token string">&#39;url地址&#39;</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        解析 url 中 地址信息

    <span class="token keyword">const</span> 变量 <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span> <span class="token string">&#39;url地址&#39;</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
        深度解析 url 中 地址信息

    实际项目中使用 深度解析 解析url地址
    将 携带的参数 转化为 对象形式 

    重要的两个属性 
        query       携带的参数 深度解析是以对象的形式存储
        pathname    路径地址


        <span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">&#39;http:&#39;</span><span class="token punctuation">,</span>
            请求协议

        <span class="token literal-property property">slashes</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            使用 url地址 标准语法 也就是 <span class="token operator">/</span>语法

        <span class="token literal-property property">auth</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
            授权 

        <span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">&#39;127.0.0.1:5500&#39;</span><span class="token punctuation">,</span>
            域名 <span class="token operator">/</span> <span class="token constant">IP</span>地址 <span class="token operator">+</span> 端口号

            <span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">&#39;5500&#39;</span><span class="token punctuation">,</span>
                端口号

            <span class="token literal-property property">hostname</span><span class="token operator">:</span> <span class="token string">&#39;127.0.0.1&#39;</span><span class="token punctuation">,</span>
                域名 <span class="token operator">/</span> <span class="token constant">IP</span>地址

            <span class="token literal-property property">hash</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
                哈希值 

            <span class="token literal-property property">search</span><span class="token operator">:</span> <span class="token string">&#39;?category=%E7%AB%A5%E8%A3%85%E7%8E%A9%E5%85%B7&#39;</span><span class="token punctuation">,</span>
                携带的参数 有问号的

            <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token string">&#39;category=%E7%AB%A5%E8%A3%85%E7%8E%A9%E5%85%B7&#39;</span><span class="token punctuation">,</span>
                携带的参数 没有问号的 也就是 键值对

            <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">[</span>Object<span class="token operator">:</span> <span class="token keyword">null</span> prototype<span class="token punctuation">]</span> <span class="token punctuation">{</span> <span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token string">&#39;童装玩具&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
                如果是 深度解析 以 对象形式存储 携带参数


            <span class="token literal-property property">pathname</span><span class="token operator">:</span> <span class="token string">&#39;/week7/day04/02_%E4%BB%A3%E7%A0%81/shop_demo3/pages/list.html&#39;</span><span class="token punctuation">,</span>
                路径的名称

            <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">&#39;/week7/day04/02_%E4%BB%A3%E7%A0%81/shop_demo3/pages/list.html?category=%E7%AB%A5%E8%A3%85%E7%8E%A9%E5%85%B7&#39;</span><span class="token punctuation">,</span>
                路径名称 <span class="token operator">+</span> 携带参数

            <span class="token literal-property property">href</span><span class="token operator">:</span> <span class="token string">&#39;http://127.0.0.1:5500/week7/day04/02_%E4%BB%A3%E7%A0%81/shop_demo3/pages/list.html?category=%E7%AB%A5%E8%A3%85%E7%8E%A9%E5%85%B7&#39;</span>
                完成的url地址 协议 <span class="token operator">+</span> 域名<span class="token operator">/</span><span class="token constant">IP</span>地址 <span class="token operator">+</span> 端口号 <span class="token operator">+</span> 路径 <span class="token operator">+</span> 携带参数 
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>path:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>操作路径

导入
    <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;path&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

使用

    <span class="token keyword">let</span> 变量 <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        将 设定的内容拼接为地址字符串

    <span class="token keyword">let</span> 变量 <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        将 设定的内容拼接为地址字符串
        如果不设定根目录路径 会自动添加跟目录路径

    <span class="token keyword">let</span> 变量 <span class="token operator">=</span> path<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        解析 设定的地址路径 


            <span class="token punctuation">{</span>
                <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
                    根目录信息
                    如果是 url网址 没有根目录信息

                <span class="token literal-property property">dir</span><span class="token operator">:</span> <span class="token string">&#39;http://127.0.0.1:5500/week7/day04/02_%E4%BB%A3%E7%A0%81/shop_demo3/pages&#39;</span><span class="token punctuation">,</span>
                    当前文件的详细信息

                <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token string">&#39;list.html?category=%E7%AB%A5%E8%A3%85%E7%8E%A9%E5%85%B7&#39;</span><span class="token punctuation">,</span>
                    文件名 和 携带的参数

                <span class="token literal-property property">ext</span><span class="token operator">:</span> <span class="token string">&#39;.html?category=%E7%AB%A5%E8%A3%85%E7%8E%A9%E5%85%B7&#39;</span><span class="token punctuation">,</span>
                    文件的扩展名 和 携带的参数
                    如果没有携带参数 就是 <span class="token punctuation">.</span>html 扩展名本身

                <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;list&#39;</span>
                    文件名称
            <span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>http:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>设定一个本地服务器 响应前端请求

响应前端请求 根据前端请求的内容 返回响应的 静态文件 <span class="token operator">/</span> 数据数值
    发送的是 静态请求 响应结果是 html css js 图片等文件内容
    发送的数 数据请求 响应结果是 数据数值 一般是 json字符串

导入
    <span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;http&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

使用
    步骤<span class="token number">1</span>   创建服务器
        <span class="token keyword">const</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">参数<span class="token number">1</span> <span class="token punctuation">,</span> 参数<span class="token number">2</span></span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            定义服务器的响应内容

            参数<span class="token number">1</span> 存储请求中相关内容
                参数<span class="token number">1</span><span class="token punctuation">.</span>url 
                    发送的请求的相关地址信息

            参数<span class="token number">2</span> 存储响应的相关内容
                参数<span class="token number">2.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                    设定响应给浏览器的内容

        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


    步骤<span class="token number">2</span>   设定监听端口
        server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span> 端口号 <span class="token punctuation">,</span> <span class="token function">回调函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
            端口号的范围是 <span class="token number">0</span> <span class="token operator">-</span> <span class="token number">65535</span> 
            只要不和其他程序的端口好冲突 就可以
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>服务器的核心原理:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>根据 前端发送来的不同 请求地址
响应 <span class="token function">不同内容结果</span><span class="token punctuation">(</span> 静态文件 <span class="token operator">/</span> 数据数值 <span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>后端程序的报错优先:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>后端程序 执行的是 本地文件或者数据库操作
执行的都是 敏感操作

会执行 报错优先原则 
    方式<span class="token number">1</span>
        有报错 就会执行之后所有程序的执行

    方式<span class="token number">2</span>
        默认不执行程序 
        有 之前程序执行成功的返回结果 
        再 执行后续的程序
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="创建-服务器" tabindex="-1"><a class="header-anchor" href="#创建-服务器" aria-hidden="true">#</a> 创建 服务器</h2><details class="custom-container details"><summary>创建 服务器 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">内置模块http</span><span class="token operator">:</span>
    通过 内置模块http 理解服务器搭建的基本执行原理

<span class="token literal-property property">导入内置模块http</span><span class="token operator">:</span>
<span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span> <span class="token string">&#39;http&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">创建服务器</span><span class="token operator">:</span> 
<span class="token keyword">const</span> server <span class="token operator">=</span> http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">request <span class="token punctuation">,</span> response</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
    设定 服务器的各种响应
    这个 所谓的响应 是 针对前端程序发送的请求的响应
    本质上是在设定 网址 url地址

    request<span class="token punctuation">.</span>url     存储 前端发送请求的url地址
    request<span class="token punctuation">.</span>method  存储 前端发送请求的方式
    request<span class="token punctuation">.</span>headers 存储 请求头信息
        request<span class="token punctuation">.</span>headers 中 content<span class="token operator">-</span>type 属性 存储 请求头编码格式
            application<span class="token operator">/</span>x<span class="token operator">-</span>www<span class="token operator">-</span>form<span class="token operator">-</span>urlencoded
                普通的键值对字符串传参

            application<span class="token operator">/</span>json
                json字符串传参

        请求头 常见格式
            <span class="token literal-property property">https</span><span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>blog<span class="token punctuation">.</span>csdn<span class="token punctuation">.</span>net<span class="token operator">/</span>qq_24147051<span class="token operator">/</span>article<span class="token operator">/</span>details<span class="token operator">/</span><span class="token number">90477756</span>

    request<span class="token punctuation">.</span>url     请求地址可以使用 内置模块url深度解析
        <span class="token keyword">const</span> result <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span> request<span class="token punctuation">.</span>url <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        解析的结果 是一个 对象类型 
            result<span class="token punctuation">.</span>query    是 对象形式存储 携带的参数
                            如果没有携带参数 结果是 <span class="token punctuation">{</span><span class="token punctuation">}</span> 空对象
            result<span class="token punctuation">.</span>pathname 是 地址路径

    如果 pathname 是 <span class="token operator">/</span> 请求的是 首页面
        使用 fs模块 按照 相对路径 读取 首页面内容响应

    如果 pathname 是 <span class="token operator">/</span><span class="token keyword">static</span> 开头 请求的是 <span class="token function">静态资源</span><span class="token punctuation">(</span>返回结果是文件内容<span class="token punctuation">)</span>
        按照 文件的扩展名 和 文件名称
        拼接 <span class="token function">相对路径</span> <span class="token punctuation">(</span> 扩展名对应的文件夹 <span class="token operator">+</span> 文件名 <span class="token punctuation">)</span>
        使用 拼接的相对路径 通过 fs模块 读取 对应的文件内容

    如果 pathname 是 <span class="token operator">/</span>api 开头 请求的是 <span class="token function">数据接口</span><span class="token punctuation">(</span>返回结果是数据数值<span class="token punctuation">)</span>
        按照 请求地址 设定 响应内容

        如果 pathname 是 <span class="token operator">/</span>api<span class="token operator">/</span>register  执行注册操作
            例如 执行 <span class="token keyword">get</span>操作
                判断 请求方式 是不是 <span class="token keyword">get</span>
                判断 携带参数 
                <span class="token operator">...</span>

                获取携带参数 操作数据库 响应 操作结果数据

                <span class="token operator">!</span>   <span class="token keyword">get</span>方式获取参数
                    解析浏览器地址栏中携带的键值对字符串就可以了



        如果 pathname 是 <span class="token operator">/</span>api<span class="token operator">/</span>login     执行登录操作
                例如 执行 post操作
                判断 请求方式 是不是 post
                判断 携带参数 
                <span class="token operator">...</span>

                获取携带参数 操作数据库 响应 操作结果数据

                <span class="token operator">!</span>   post方式获取参数

                    <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&#39;&#39;</span> <span class="token punctuation">;</span>
                    
                    request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span> <span class="token string">&#39;data&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">形参</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
                        str <span class="token operator">+=</span> 形参
                    <span class="token punctuation">}</span><span class="token punctuation">)</span>

                    获取的携带参数结果是 buffer字符串

                    request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span> <span class="token string">&#39;end&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                        根据 request<span class="token punctuation">.</span>headers 中 content<span class="token operator">-</span>type 存储的请求头编码格式 进行 解析
                        
                        如果是 application<span class="token operator">/</span>x<span class="token operator">-</span>www<span class="token operator">-</span>form<span class="token operator">-</span>urlencoded 
                            在 结果前拼接 <span class="token operator">?</span> 问号 
                            写成 浏览器地址栏携带参数的语法形式 <span class="token operator">?</span>键名<span class="token operator">=</span>键值<span class="token operator">&amp;</span>键名<span class="token operator">=</span>键值<span class="token operator">...</span>
                    
                            使用 内置模块url的 url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 进行深度解析
                            解析结果中 query属性 存储的是 参数对象

                        如果是 application<span class="token operator">/</span>json
                            使用 <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 解析
                        
                        根据 请求参数 执行数据库操作 响应结果
                    <span class="token punctuation">}</span><span class="token punctuation">)</span>




    如果 pathname 不是<span class="token operator">/</span> 不是<span class="token operator">/</span><span class="token keyword">static</span>开头 不是<span class="token operator">/</span>api 开头 地址错误


<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">设定监听端口</span><span class="token operator">:</span>

server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span> <span class="token number">8088</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span> <span class="token string">&#39;服务器开启 监听 8088 端口&#39;</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><details class="custom-container details"><summary>创建 服务器 <span class="badge tip" style=""><!--[-->代码<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">// 导入依赖包</span>
<span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 创建服务器</span>
<span class="token keyword">const</span> server <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 静态资源配置</span>
<span class="token comment">// 根据设定的网址 按照 参数1 设定的 截取之后的地址</span>
<span class="token comment">// 参数2 设定的地址之前 拼接 参数1 截取的地址 </span>
<span class="token comment">// 按照拼接的路径读取文件 响应内容</span>
server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;/static&#39;</span> <span class="token punctuation">,</span> express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&#39;./src&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/* 
    数据接口配置
        server.get( &#39;请求地址&#39; , function( 参数1 , 参数2 ){}) 
            响应get请求方式
                参数1   request  存储的是请求的相关信息
                参数2   response 设定的是响应的相关信息
                    response.send() 设定响应的内容

        server.post( &#39;请求地址&#39; , function( 参数1 , 参数2 ){}) 
            响应post请求方式
                参数1   request  存储的是请求的相关信息
                参数2   response 设定的是响应的相关信息
                    response.send() 设定响应的内容

*/</span>

<span class="token comment">// 设定 get 响应 </span>
server<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">&#39;/api/register1&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request <span class="token punctuation">,</span> response</span><span class="token punctuation">)</span><span class="token punctuation">{</span>

    <span class="token comment">// 设定响应内容</span>
    response<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> <span class="token string">&#39;我是 注册1 响应的内容&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 设定 post 响应</span>
server<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;/api/register2&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request <span class="token punctuation">,</span> response</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    
    <span class="token comment">// 设定响应内容</span>
    response<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> <span class="token string">&#39;我是 注册2 响应的内容&#39;</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 设定监听端口</span>
server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span> <span class="token number">8088</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&#39;服务器启动成功 监听 8088 端口&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 启动服务</span>
node 文件名称<span class="token punctuation">.</span>后缀
<span class="token literal-property property">eg</span><span class="token operator">:</span> server<span class="token punctuation">.</span>js  启动服务<span class="token operator">:</span> node server<span class="token punctuation">.</span>js
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="npm" tabindex="-1"><a class="header-anchor" href="#npm" aria-hidden="true">#</a> npm</h2><details class="custom-container details"><summary>npm <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>1. 配置npm:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>配置下载地址 修改成 淘宝镜像
    npm config <span class="token keyword">set</span> registry https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>registry<span class="token punctuation">.</span>npm<span class="token punctuation">.</span>taobao<span class="token punctuation">.</span>org

下载配置 cnpm
    npm install <span class="token operator">-</span>g cnpm <span class="token operator">--</span>registry<span class="token operator">=</span>https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>registry<span class="token punctuation">.</span>npm<span class="token punctuation">.</span>taobao<span class="token punctuation">.</span>org
        下载 安装 cnpm全局依赖包
        配置下载地址是 淘宝镜像
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>2. 使用 npm / cnpm 下载:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token number">2</span><span class="token operator">-</span><span class="token number">1</span> 初始化 项目 文件夹
    切换目录到 指定的项目文件夹 
    项目文件夹 不能带有 中文<span class="token punctuation">,</span>空格<span class="token punctuation">,</span>特殊符号等
        npm init <span class="token operator">-</span>y
            自动初始化文件夹

            自动生成 <span class="token keyword">package</span><span class="token punctuation">.</span>json 文件
            会自动存储记录 项目下载的 依赖包


            <span class="token punctuation">{</span>
                <span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;gy_2201&quot;</span><span class="token punctuation">,</span>
                    项目名称 默认使用 文件夹名称

                <span class="token string-property property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1.0.0&quot;</span><span class="token punctuation">,</span>
                    项目版本号 

                <span class="token string-property property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
                    项目描述
                
                <span class="token string-property property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;banner.js&quot;</span><span class="token punctuation">,</span>
                    <span class="token function">入口文件</span><span class="token punctuation">(</span>之后会配置项目的入口文件<span class="token punctuation">)</span>

                <span class="token string-property property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token string-property property">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                    <span class="token function">测试命令</span><span class="token punctuation">(</span>之后会定义项目的测试命令<span class="token punctuation">)</span>

                <span class="token string-property property">&quot;keywords&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                    项目关键词

                <span class="token string-property property">&quot;author&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
                    开发者名称

                <span class="token string-property property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;ISC&quot;</span>
                    项目证书
            <span class="token punctuation">}</span>


<span class="token number">2</span><span class="token operator">-</span><span class="token number">2</span> 下载命令

    全局依赖包
        在 任意路径下安装 
        安装到 nodejs 指定的文件夹中
            <span class="token constant">C</span><span class="token operator">:</span>\<span class="token function">Users</span><span class="token punctuation">(</span>用户<span class="token punctuation">)</span>\<span class="token function">Administrator</span><span class="token punctuation">(</span>用户名<span class="token punctuation">)</span>\AppData\Roaming\npm\node_modules\npm
        在任意路径下 所有的项目文件都可以调用使用
        
        npm install <span class="token operator">--</span>global 包名
            默认安装最新版本

        npm install <span class="token operator">--</span>global 包名@版本号
            安装指定版本

        npm i <span class="token operator">-</span>g 包名
        npm i <span class="token operator">-</span>g 包名@版本号

    项目依赖包 
        项目依赖
            开发时 测试时 上线时<span class="token operator">...</span> 都会一直使用的依赖包

            npm install 包名
            npm install 包名@版本号

            npm i 包名
            npm i 包名@版本号

        开发依赖
            只有开发时使用 测试 上线等 都不会在使用的依赖包

            npm install <span class="token operator">--</span>save<span class="token operator">-</span>dev 包名
            npm install <span class="token operator">--</span>save<span class="token operator">-</span>dev 包名@版本号

            npm i <span class="token operator">-</span><span class="token constant">D</span> 包名
            npm i <span class="token operator">-</span><span class="token constant">D</span> 包名@版本号

        项目依赖 和 开发依赖 在 <span class="token keyword">package</span><span class="token punctuation">.</span>json 文件中存储方式不同

            
            <span class="token string-property property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token string-property property">&quot;jquery&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^3.6.1&quot;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
                项目依赖的存储


            <span class="token string-property property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token string-property property">&quot;bootstrap&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^5.2.2&quot;</span><span class="token punctuation">,</span>
                <span class="token string-property property">&quot;swiper&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^8.4.3&quot;</span>
            <span class="token punctuation">}</span>
                开发依赖的存储
                
        一个依赖包 npm 只会存储一个版本
        新下载的版本 不管版本号是多少 一定会覆盖原始版本

<span class="token number">2</span><span class="token operator">-</span><span class="token number">3</span> 查看依赖包的安装位置和版本号
            
    npm ls 包名 <span class="token operator">--</span>global
    npm ls 包名 <span class="token operator">-</span>g
        查看全局依赖包版本

    npm ls 包名 
    npm ls 包名 
        查看项目依赖包版本

    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">-- jquery@3.5.1
        有版本号 证明依赖包安装成功

    </span><span class="token template-punctuation string">`</span></span><span class="token operator">--</span> <span class="token punctuation">(</span>empty<span class="token punctuation">)</span>
        没有版本号 证明依赖包安装失败

<span class="token number">2</span><span class="token operator">-</span><span class="token number">4</span> 查看 依赖包的版本号

    npm view 包名 version
        查看依赖包最新版本号

    npm view 包名 versions
        查看依赖包所有版本号

<span class="token number">2</span><span class="token operator">-</span><span class="token number">5</span> 删除 依赖包 

    npm uninstall <span class="token operator">--</span>global 包名
    npm un <span class="token operator">-</span>g 包名
        删除全局依赖包

    npm uninstall 包名
    npm un 包名
        删除项目依赖包

<span class="token number">2</span><span class="token operator">-</span><span class="token number">6</span> 清除缓存

    npm在下载依赖包的过程中 会 生成缓存文件
    如果 依赖包下载错误或者意外中断

    会生成错误的缓存文件
    再次下载依赖包 会从 错误的缓存继续下载 
    这个依赖包的下载就会一直报错

    如果 下载发生错误 或者 意外中断
    一定要 先清除 npm 缓存 再重新下载依赖包

        npm cache clear <span class="token operator">--</span>force
        npm cache clear <span class="token operator">-</span>f

    nodejs <span class="token number">15</span>以前的版本 
        会有一个专门的缓存文件夹
            <span class="token constant">C</span><span class="token operator">:</span>\<span class="token function">Users</span><span class="token punctuation">(</span>用户<span class="token punctuation">)</span>\<span class="token function">Administrator</span><span class="token punctuation">(</span>用户名<span class="token punctuation">)</span>\AppData\Roaming\npm\node_modules\npm<span class="token operator">-</span>cache
            可以找到直接删除这个缓存文件夹
        

<span class="token number">2</span><span class="token operator">-</span><span class="token number">7</span> 新项目安装依赖包

    创建新项目文件夹
            
    复制粘贴之前文件夹的 <span class="token keyword">package</span><span class="token punctuation">.</span>json 文件

    执行 安装命令 安装 <span class="token keyword">package</span><span class="token punctuation">.</span>json 文件 中 记录的依赖包

        npm install
        npm i
            安装 记录的所有依赖包
            开发依赖 项目依赖

        npm install <span class="token operator">--</span>production
        npm i <span class="token operator">--</span>production
            安装 开发依赖 
            不会安装 项目依赖
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>nodemon依赖包:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>第三方依赖包 
作用是 nodejs 的 热启动

下载安装全局依赖包 
    npm i <span class="token operator">-</span>g nodemon

使用方法
    之前使用 node 文件名 执行 外部js文件

    现在使用 nodemon 文件名 执行 外部js文件

    文件内容更新 nodemon 自动重启文件
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>express依赖包:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">下载成项目依赖包</span><span class="token operator">:</span>
    npm i express

<span class="token literal-property property">导入express依赖包</span><span class="token operator">:</span>

    <span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;express&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">创建服务器</span><span class="token operator">:</span>

    <span class="token keyword">const</span> server <span class="token operator">=</span> <span class="token function">express</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token literal-property property">配置静态地址</span><span class="token operator">:</span>

    根据 服务器设定的 请求地址 
    配合 server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 参数<span class="token number">1</span> 参数<span class="token number">2</span> 拼接生成新的 fs读取文件的地址
    express自动读取文件内容 通过 response<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 响应给前端


    server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> 参数<span class="token number">1</span> <span class="token punctuation">,</span> express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span>
        参数<span class="token number">1</span>   一般是服务器定义的 分类关键词
                <span class="token operator">/</span><span class="token keyword">static</span>     静态资源
                <span class="token operator">/</span>api        数据接口

        参数<span class="token number">2</span>   文件夹路径

        例如 输入的是 规定好的 http<span class="token operator">:</span><span class="token operator">/</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">127.0.0.1</span><span class="token regex-delimiter">/</span></span><span class="token operator">:</span><span class="token number">8088</span><span class="token operator">/</span><span class="token keyword">static</span><span class="token operator">/</span>pages<span class="token operator">/</span>index<span class="token punctuation">.</span>html
            参数<span class="token number">1</span> 需要设定为 <span class="token operator">/</span><span class="token keyword">static</span>
                获取的是 <span class="token operator">/</span><span class="token keyword">static</span> 之后的 字符串截取
                <span class="token operator">/</span>pages<span class="token operator">/</span>index<span class="token punctuation">.</span>html

            参数<span class="token number">2</span> 设定为 <span class="token punctuation">.</span><span class="token operator">/</span>src

            拼接的结果是 参数<span class="token number">2</span>设定内容 拼接上 参数<span class="token number">1</span> 截取的内容
                <span class="token punctuation">.</span><span class="token operator">/</span>src<span class="token operator">/</span>pages<span class="token operator">/</span>index<span class="token punctuation">.</span>html
                这个拼接结果 应该是 你要访问的html文件的路径

<span class="token literal-property property">数据接口响应</span><span class="token operator">:</span>

    server<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> 请求地址 <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request <span class="token punctuation">,</span> response</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        只能响应 <span class="token keyword">get</span>请求方式
        如果是 post 请求方式 执行会报错

    server<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> 请求地址 <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">request <span class="token punctuation">,</span> response</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        只能响应 post请求方式
        如果是 <span class="token keyword">get</span> 请求方式 执行会报错

    回调函数参数<span class="token number">1</span>   request
        存储请求信息

    回调函数参数<span class="token number">2</span>   response
        设定响应信息
        
        response<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 
            设定 响应内容


<span class="token literal-property property">设定监听端口</span><span class="token operator">:</span>

    server<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span> <span class="token number">8088</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line"> </div><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></details><h2 id="路由表" tabindex="-1"><a class="header-anchor" href="#路由表" aria-hidden="true">#</a> 路由表</h2><details class="custom-container details"><summary>路由表 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><p><strong>作用:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>实际项目中 服务器要定义的 <span class="token function">路由</span><span class="token punctuation">(</span>数据接口<span class="token punctuation">)</span> 非常多
如果 使用普通的语法形式 需要 写非常多的请求路径判断

普通的语法形式
    server<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">&#39;地址1&#39;</span> <span class="token punctuation">,</span> <span class="token function">回调函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    server<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">&#39;地址2&#39;</span> <span class="token punctuation">,</span> <span class="token function">回调函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    server<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;地址3&#39;</span> <span class="token punctuation">,</span> <span class="token function">回调函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    server<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;地址4&#39;</span> <span class="token punctuation">,</span> <span class="token function">回调函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    server<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">&#39;地址5&#39;</span> <span class="token punctuation">,</span> <span class="token function">回调函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    server<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">&#39;地址6&#39;</span> <span class="token punctuation">,</span> <span class="token function">回调函数</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token operator">...</span><span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">.</span>

执行结果是 server<span class="token punctuation">.</span>js 这个程序中要定义的 <span class="token function">路由</span><span class="token punctuation">(</span>数据接口<span class="token punctuation">)</span> 就非常多
造成这个文件内容就 非常的臃肿
一个请求 需要执行非常多的 请求地址 判断
请求响应的时间就会非常长 
</code></pre><div class="highlight-lines"><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>定义 路由表的语法形式:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>例如 前端发送请求 输入的地址是后端定义好的地址 
    <span class="token operator">/</span>api<span class="token operator">/</span>user<span class="token operator">/</span>login

通过 服务器中的判断程序 执行对应的 程序文件 
    server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token string">&#39;/api&#39;</span> <span class="token punctuation">,</span> handel <span class="token punctuation">)</span><span class="token punctuation">;</span>
    router<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;/user&#39;</span> <span class="token punctuation">,</span> userHandel <span class="token punctuation">)</span><span class="token punctuation">;</span>
    router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;/login&#39;</span> <span class="token punctuation">,</span> login <span class="token punctuation">)</span><span class="token punctuation">;</span>

    server<span class="token punctuation">.</span>js中 server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 判断 如果 请求地址是 <span class="token operator">/</span>api 开头
        触发执行 handel函数程序

        handel函数程序是 加载的 index<span class="token punctuation">.</span>js 文件 模块化开发语法 导出的程序
            <span class="token keyword">const</span> handel <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./api/index.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    继续执行 index<span class="token punctuation">.</span>js 中 导入的 router 中 设定的程序
        router<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;/user&#39;</span> <span class="token punctuation">,</span> userHandel <span class="token punctuation">)</span><span class="token punctuation">;</span>
        router<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;/cart&#39;</span> <span class="token punctuation">,</span> cartHandel <span class="token punctuation">)</span><span class="token punctuation">;</span>

        继续判断 请求的路径地址
            当前输入的地址是 <span class="token operator">/</span>api<span class="token operator">/</span>user<span class="token operator">/</span>login
            触发执行的是 <span class="token operator">/</span>user 地址 对应的 userHandler 程序 
            也就是 通过 <span class="token keyword">const</span> userHandel <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./user.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
            导入的 user<span class="token punctuation">.</span>js 文件 导出的程序
            也就是 执行 user<span class="token punctuation">.</span>js 中 导入的 router 程序

    继续执行 user<span class="token punctuation">.</span>js 中 导入 router 中 设定的程序
        router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;/login&#39;</span> <span class="token punctuation">,</span> login <span class="token punctuation">)</span><span class="token punctuation">;</span>
        router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;/register&#39;</span> <span class="token punctuation">,</span> register <span class="token punctuation">)</span><span class="token punctuation">;</span>

        继续判断 请求的路径地址
            当前输入的地址是 <span class="token operator">/</span>api<span class="token operator">/</span>user<span class="token operator">/</span>login
            触发执行的是 <span class="token operator">/</span>login 地址 对应的 login 程序

            login程序 是 <span class="token keyword">const</span> <span class="token punctuation">{</span> login <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;./user/login.js&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
            导入的 login<span class="token punctuation">.</span>js 文件中 导出的程序

            login<span class="token punctuation">.</span>js文件中 定义的 是 登录请求 执行的程序
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>总结:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>之前的程序 
    发送请求地址
        <span class="token operator">/</span>api<span class="token operator">/</span>user<span class="token operator">/</span>login

    server<span class="token punctuation">.</span>js文件中执行
        server<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;/api/user/login&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 登录程序 <span class="token punctuation">}</span><span class="token punctuation">)</span>                          

路由的程序
    发送请求地址
        <span class="token operator">/</span>api<span class="token operator">/</span>user<span class="token operator">/</span>login

    server<span class="token punctuation">.</span>js文件中执行
        server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;/api&#39;</span> <span class="token punctuation">,</span> 去执行对应的一级路由表index<span class="token punctuation">.</span>js <span class="token punctuation">)</span>

    index<span class="token punctuation">.</span>js文件中
        router<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;/user&#39;</span> <span class="token punctuation">,</span> 去执行对应的二级路由表 user<span class="token punctuation">.</span>js <span class="token punctuation">)</span>

    user<span class="token punctuation">.</span>js文件中
        router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span> <span class="token string">&#39;/login&#39;</span> <span class="token punctuation">,</span> 去执行对应的路由文件 login<span class="token punctuation">.</span>js <span class="token punctuation">)</span>

    login<span class="token punctuation">.</span>js 
        <span class="token keyword">function</span> <span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> 登录程序 <span class="token punctuation">}</span>

    server<span class="token punctuation">.</span>js 服务器文件中 只需要导入 一级路由表 
    不用定义所有的 <span class="token function">路由</span><span class="token punctuation">(</span>数据接口<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>程序语法:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>当前这个项目的路由表的结构是 
    总表 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 一级表 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 二级表 <span class="token operator">--</span><span class="token operator">-</span><span class="token operator">&gt;</span> 路由

服务器文件 server<span class="token punctuation">.</span>js
    server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;路径&#39;</span> <span class="token punctuation">,</span> 程序<span class="token operator">...</span> <span class="token punctuation">)</span>
        前端发送的请求 按照 匹配的 <span class="token string">&#39;路径&#39;</span> 触发程序

        情况<span class="token number">1</span>   参数<span class="token number">2</span>程序 是 一个 路由表 

            handler

            按照匹配的路径 触发执行 路由表规范

        情况<span class="token number">2</span>   参数<span class="token number">2</span>程序 是 一个 静态文件加载

            express<span class="token punctuation">.</span><span class="token function">static</span><span class="token punctuation">(</span><span class="token string">&#39;./src&#39;</span><span class="token punctuation">)</span>

                截取 <span class="token operator">/</span><span class="token keyword">static</span> 之后的地址
                在这个底之前 拼接 <span class="token punctuation">.</span>src 
                按照拼接完成的地址 加载 静态文件
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>路由表文件:</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>一级 index<span class="token punctuation">.</span>js
二级 user<span class="token punctuation">.</span>js goods<span class="token punctuation">.</span>js cart<span class="token punctuation">.</span>js


创建一个表结构 
    <span class="token keyword">const</span> router <span class="token operator">=</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

向这个表结构添加路由规范
    
    一级表 导入的是 二级表
        router<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;路径1&#39;</span> <span class="token punctuation">,</span> 二级表<span class="token number">1</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        router<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;路径2&#39;</span> <span class="token punctuation">,</span> 二级表<span class="token number">2</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
        router<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span> <span class="token string">&#39;路径3&#39;</span> <span class="token punctuation">,</span> 二级表<span class="token number">3</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

    二级表 导入的是 路由

导出这个表结构
    module<span class="token punctuation">.</span>exports <span class="token operator">=</span> router <span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="/blogs/assets/路由表和中间件-0646c8c2.png" alt="路由表和中间件"></p></details><h2 id="中间件" tabindex="-1"><a class="header-anchor" href="#中间件" aria-hidden="true">#</a> 中间件</h2><details class="custom-container details"><summary>中间件 <span class="badge tip" style=""><!--[-->介绍<!--]--></span></summary><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>所谓的中间件就是函数程序
定义在 路由表中的函数程序
通过 中间件程序 触发执行 下一步程序

全局中间件
    定义在 服务器文件server<span class="token punctuation">.</span>js 中
    静态请求 数据请求都会触发

请求中间件
    定义在 一级表index<span class="token punctuation">.</span>js 中 
    所有 数据请求都会触发

路由中间件
    定义在 二级表cart<span class="token punctuation">.</span>js 中
    复杂项目中 也可以是 定义在 三级表结构中
    某一类请求 都会触发
    
错误中间件
    定义在 全局中间件中
    在 其他任意程序中都会触发执行
    专门执行验证判断 
    如果 报错 触发执行 全局中间件中定义好的程序
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>参数解析</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code>使用依赖包 进行 参数解析

使用的 express 自带的依赖包 body<span class="token operator">-</span>parser

如果 node_modules 中 已经下载这个 依赖包 
不需要重复下载 

如果 node_modules 中 没有下载这个 依赖包 
需要自己手动下载
    npm i body<span class="token operator">-</span>parser

导入这个依赖包
    <span class="token keyword">const</span> 变量 <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;body-parser&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

使用是固定的语法形式
    server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">body</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">extended</span><span class="token operator">:</span><span class="token boolean">false</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        解析 post方式中 键值对字符串 参数

    server<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>body<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        解析 post方式中 键值对json字符串 参数

<span class="token keyword">get</span>方式发送的请求
    依赖包 会 在 request<span class="token punctuation">.</span>query 中 以对象形式存储携带参数

post方式发送的请求
    依赖包 会 在 request<span class="token punctuation">.</span>body 中 以对象形式存储携带参数

如果没有携带参数 调用结果是 空字符串

body<span class="token operator">-</span>parser依赖包的执行原理 
就是我们自己写的 get <span class="token operator">/</span> post 参数 在 http模块中 的解析原理 完全相同
将 <span class="token keyword">get</span>请求携带的参数 定义在 request<span class="token punctuation">.</span>query 中 
将 post请求携带的参数 定义在 request<span class="token punctuation">.</span>body 中 
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>http 数据解析原理</strong></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">get</span> 请求方式 只能 以 键值对 字符串形式 在 浏览器地址栏中 携带参数

post 请求方式 在 请求体 中 
    可以 是 键值对字符串 
    可以 是 键值对json字符串
    可以 是 二进制文本流 
    <span class="token operator">...</span><span class="token operator">...</span><span class="token operator">...</span>
    多种方式 携带参数

        application<span class="token operator">/</span>json    
            json字符串 的请求头设定

        application<span class="token operator">/</span>x<span class="token operator">-</span>www<span class="token operator">-</span>form<span class="token operator">-</span>urlencoded
            普通键值对字符串 的请求头设定

        multipart<span class="token operator">/</span>form<span class="token operator">-</span>data 
            二进制文本流<span class="token operator">/</span>二进制数据流 的请求头设定

        text<span class="token operator">/</span>xml
            文字或者xml文件 的请求头设定

    post解析参数 根据参数的不同语法形式 需要执行不同的程序过程
    目前只需要掌握 普通键值对字符串 和 json字符串 解析的原理就可以

<span class="token keyword">get</span> 解析参数
    解析浏览器地址栏中携带的数据参数

        <span class="token keyword">const</span> res <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span> request<span class="token punctuation">.</span>url <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>query

            url模块中 <span class="token function">parse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 方法 进行 深度解析
            解析的内容是 request<span class="token punctuation">.</span>url 中 存储的浏览器地址栏数据信息
            解析结果是一个对象 其中 query属性 以对象形式 存储 <span class="token keyword">get</span>方式携带的参数
            
post 解析参数
    <span class="token number">1</span><span class="token punctuation">,</span>  获取请求体中携带的数据参数

        <span class="token punctuation">{</span><span class="token string-property property">&quot;name&quot;</span><span class="token operator">:</span><span class="token string">&quot;张三&quot;</span><span class="token punctuation">,</span><span class="token string-property property">&quot;pwd1&quot;</span><span class="token operator">:</span><span class="token number">123</span><span class="token punctuation">,</span><span class="token string-property property">&quot;pwd2&quot;</span><span class="token operator">:</span><span class="token number">123</span><span class="token punctuation">,</span><span class="token string-property property">&quot;nickname&quot;</span><span class="token operator">:</span><span class="token string">&quot;张三&quot;</span><span class="token punctuation">}</span>
            请求体中 json字符串 携带的参数
        name<span class="token operator">=</span>张三<span class="token operator">&amp;</span>pwd1<span class="token operator">=</span><span class="token number">123</span><span class="token operator">&amp;</span>pwd2<span class="token operator">=</span><span class="token number">123</span><span class="token operator">&amp;</span>nickname<span class="token operator">=</span>张三
            请求体中 普通字符串 携带的参数

        这些参数存储在 情头报文的请求体中 
        需要先解析到 js程序中

        <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&#39;&#39;</span> <span class="token punctuation">;</span>

        request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span> <span class="token string">&#39;data&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span> <span class="token parameter">val</span> <span class="token punctuation">)</span><span class="token punctuation">{</span>
            str <span class="token operator">+=</span> val
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

            等于是 给 request 添加 data类型的程序
            作用是 解析 request 请求报文中 请求体携带的参数

            post方式携带参数 这个参数可能非常大
            data方法 对于 post携带的 大参数 不能一次完全都获取到
            需要执行多次 才能完整获取整个 携带参数

            每次获取的结果都存储在 形参val中 
            将每次获取到的结果 拼接到 变量str 
            生成一个完整的 post方式携带的参数

            获取的结果 是 buffer格式的数据

        request<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span> <span class="token string">&#39;end&#39;</span> <span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

            data事件执行结束 触发执行end事件
            end事件 将 获取到 buffer格式的数据 还原为对应的数据格式

            最终的解析结果是 以对象形式存储 键值对

            如果请求头是 application<span class="token operator">/</span>json
            表示携带的参数 是 json字符串形式 
                直接使用 <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 就可以解析还原为对应的对象
                    <span class="token keyword">const</span> valObj <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span> str <span class="token punctuation">)</span><span class="token punctuation">;</span>

            如果请求头是 application<span class="token operator">/</span>x<span class="token operator">-</span>www<span class="token operator">-</span>form<span class="token operator">-</span>urlencoded
            表示携带的参数 是 普通字符串形式
                在 结果前拼接 <span class="token operator">?</span> 使用 url模块的 <span class="token function">parse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 方法 深度解析
                解析的结果是一个 对象 
                其中 query属性 以 对象形式 键值对
                    <span class="token keyword">const</span> valObj <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span> <span class="token string">&#39;?&#39;</span> <span class="token operator">+</span> str <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span><span class="token punctuation">.</span>query <span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><img src="/blogs/assets/路由表和中间件-0646c8c2.png" alt="路由表和中间件"></p></details></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">作者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: fayuanaini@dingtalk.com">fayuan</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/blogs/assets/app-5598dde8.js" defer></script>
  </body>
</html>
